/* ============================================================
   ELSEWEDY TELECOM — PASSIVE SOLUTIONS PLATFORM
   Liquid Glass Light · Unified Radius System
   ============================================================ */
:root {
  /* ONE radius language — nothing else is permitted */
  --r-xl: 26px;
  /* page panels, sheets, city stage */
  --r-lg: 18px;
  /* cards, tiles, drawers */
  --r-md: 12px;
  /* inner blocks, inputs, rows */
  --r-sm: 9px;
  /* micro elements, swatches */
  --r-pill: 999px;
  /* buttons, chips, controls */
  --util-h: 44px;
  /* fixed top utility bar height */
  --white: #FFFFFF;
  --soft: #FAFAFA;
  --glass-w: #F7F7F8;
  --titanium: #E8E8EA;
  --lgrey: #D9D9DD;
  --graphite: #1C1C1F;
  --red: #CE1B28;
  --ink-2: rgba(28, 28, 31, 0.62);
  --ink-3: rgba(28, 28, 31, 0.42);
  --ink-4: rgba(28, 28, 31, 0.24);
  --hair: rgba(28, 28, 40, 0.08);
  /* Recessed chip / list-row surface (part-number rows, thumbnails, pills in the product preview & detail).
     It was referenced everywhere as var(--surface-2, #f7f7f8) but never defined, so dark mode always got
     the light fallback — white rows on a dark panel. */
  --surface-2: #F5F5F7;
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --springy: cubic-bezier(0.34, 1.3, 0.44, 1);
  --font: 'Montserrat', sans-serif;
}

html[lang="ar"] {
  --font: 'Cairo', sans-serif;
}

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

input,
textarea,
select,
[contenteditable] {
  caret-color: var(--red)
}

html {
  scroll-behavior: smooth
}

/* Day/Night mode: filter is applied to each TOP-LEVEL element individually rather
   than to html/body — filter on an ancestor creates a containing block for
   position:fixed descendants, which would break the sticky nav and overlays.
   Filtering siblings independently avoids that entirely.
   `.view` itself is filtered per DIRECT CHILD (`.view > *`), not as one block:
   the active view is the whole scrollable page (thousands of px tall on
   content-heavy pages like Home), and asking the compositor to rasterize a
   single SVG-filter layer that tall silently failed to paint at all on some
   GPUs (the page went solid black past a certain scroll position in dark
   mode — worst around the animated globe section, since a live canvas
   forces that huge layer to keep re-rasterizing). Filtering each section
   individually caps every filtered layer's height at one section's worth. */
.atmosphere,
.utilbar,
.topnav,
#searchOverlay,
.view>*,
#pdOverlay,
#cmpDrawer,
#cmpOverlay,
#cartDrawer,
#toast,
#pdModalOverlay,
.sxe-nav,
.sxe-panel {
  transition: filter .7s var(--spring)
}

/* Dark mode is no longer an inverted filter — see the "DARK MODE — real
   graphite theme" section at the end of this file for the actual palette. */

body {
  font-family: var(--font);
  color: var(--graphite);
  background: var(--soft);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .7s var(--spring)
}

::selection {
  background: rgba(206, 27, 40, 0.13)
}

button,
input,
select,
textarea {
  font-family: var(--font)
}

[dir="rtl"] .flip-rtl {
  transform: scaleX(-1)
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(50% 56% at 10% 6%, rgba(120, 150, 210, 0.10), transparent 70%),
    radial-gradient(54% 60% at 92% 12%, rgba(190, 170, 150, 0.07), transparent 70%),
    radial-gradient(64% 76% at 50% 112%, rgba(110, 160, 180, 0.07), transparent 72%),
    radial-gradient(22% 26% at 80% 60%, rgba(206, 27, 40, 0.028), transparent 70%),
    linear-gradient(#FBFBFC, #F5F5F7);
}

/* ---------- Glass (light optical stack) ---------- */
.glass {
  position: relative;
  border-radius: var(--r-lg);
  isolation: isolate;
  background: radial-gradient(140% 140% at 50% -12%, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.20) 48%, rgba(255, 255, 255, 0.06) 76%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 16px 44px rgba(28, 28, 40, 0.07), 0 2px 8px rgba(28, 28, 40, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(28, 28, 40, 0.05);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(28, 28, 40, 0.065) 42%, rgba(28, 28, 40, 0.095) 70%, rgba(255, 255, 255, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  width: max-content;
}

.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(116deg, transparent 34%, rgba(255, 255, 255, 0.5) 44%, rgba(255, 255, 255, 0.07) 52%, transparent 60%);
}

.r-xl {
  border-radius: var(--r-xl)
}

.cursor-glow {
  position: relative;
  isolation: isolate
}

.cursor-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s var(--spring);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), transparent 60%)
}

.cursor-glow:hover::after {
  opacity: 1
}

.lift {
  position: relative;
  isolation: isolate;
  transition: transform .45s var(--spring), box-shadow .45s var(--spring)
}

.lift::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.42) 46%, rgba(255, 255, 255, 0.04) 56%, transparent 72%);
  transform: translateX(-140%) translateY(-30%);
  transition: transform .8s var(--spring)
}

.lift:hover::before {
  transform: translateX(60%) translateY(30%)
}

.lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 64px rgba(28, 28, 40, 0.11), 0 4px 12px rgba(28, 28, 40, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 1px rgba(28, 28, 40, 0.05), inset 0 0 0 1px rgba(206, 27, 40, 0.06)
}

.lift:active {
  transform: translateY(-2px) scale(0.99);
  transition: transform .15s var(--spring)
}

/* ---------- Type ---------- */
.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px
}

.h1 {
  font-size: clamp(34px, 4.6vw, 62px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04
}

.h2 {
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08
}

.h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em
}

.lede {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2)
}

.thin {
  font-weight: 300;
  color: var(--ink-3)
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all .4s var(--spring);
  cursor: pointer;
  border: none;
  white-space: nowrap
}

.btn:active {
  transform: translateY(0) scale(0.96);
  transition: transform .15s var(--spring)
}

.btn:focus-visible,
.icon-btn:focus-visible,
.nav-link:focus-visible,
.tile:focus-visible,
.opt:focus-visible,
.chip:focus-visible,
.pf-opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(206, 27, 40, 0.28), 0 0 0 1px rgba(206, 27, 40, 0.5)
}

.btn-red {
  background: linear-gradient(135deg, #E22633, #B5121F);
  color: #fff;
  box-shadow: 0 10px 24px rgba(206, 27, 40, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.32)
}

.btn-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 32px rgba(206, 27, 40, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.38)
}

.btn-ghost {
  color: var(--graphite);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair)
}

.btn-ghost:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair), 0 10px 22px rgba(28, 28, 40, 0.09)
}

.btn-dark {
  color: #fff;
  background: linear-gradient(135deg, #2b2e35, #17181c);
  box-shadow: 0 10px 22px rgba(20, 22, 28, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14)
}

.btn-dark:hover {
  transform: translateY(-2px)
}

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important
}

/* ---------- Nav ---------- */
/* ---------- Fixed top utility bar (glass, pinned, independent of nav scroll) ---------- */
.utilbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 310;
  height: var(--util-h);
  overflow: hidden;
  background: radial-gradient(140% 220% at 50% -80%, #ce1b28, #ce1b28 60%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(28, 28, 40, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px rgba(28, 28, 40, 0.04);
  transition: height .4s var(--spring), opacity .3s var(--spring), border-color .4s var(--spring), box-shadow .4s var(--spring)
}

/* initNavCompact() (main.js) zeroes --util-h on scroll so the bar collapses
   out of the way; body.no-utilbar pages (products, solutions) never carry
   it in the first place so this is a no-op there. */
body.util-collapsed .utilbar {
  opacity: 0;
  border-bottom-color: transparent;
  box-shadow: none
}

/* Red utility bar is hidden on the Products pages (products list, product detail,
   compare). Zeroing --util-h collapses every layout offset that depends on it. */
body.no-utilbar {
  --util-h: 0px;
}

body.no-utilbar .utilbar {
  display: none;
}

.utilbar-inner {
  max-width: 1520px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px
}

.util-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap
}

.util-contact a {
  color: var(--white);
  text-decoration: none;
  transition: color .3s var(--spring)
}

.util-contact a:hover {
  color: var(--graphite)
}

.util-sep {
  color: var(--ink-4)
}

.util-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px
}

[dir="rtl"] .util-links {
  margin-left: 0;
  margin-right: auto
}

.util-link {
  position: relative;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  transition: all .3s var(--spring)
}

.util-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--spring)
}

.util-link:hover {
  color: var(--graphite)
}

.util-link:hover::after {
  transform: scaleX(1)
}

@media (max-width:720px) {
  .util-contact {
    display: none
  }

  .utilbar-inner {
    justify-content: flex-end
  }
}

.topnav {
  position: fixed;
  top: var(--util-h);
  left: 0;
  right: 0;
  z-index: 300;
  padding: 12px 16px 0
}

.topnav-inner {
  max-width: 1520px;
  margin: 0 auto;
  padding: 10px 18px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 20px;
  background: radial-gradient(140% 160% at 50% -20%, rgba(255, 255, 255, 0.84), rgba(250, 250, 252, 0.58) 60%);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 12px 38px rgba(28, 28, 40, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(28, 28, 40, 0.05);
  transition: padding .6s var(--spring), gap .6s var(--spring), box-shadow .5s var(--spring)
}

.topnav-inner.shrink {
  padding: 6px 14px;
  gap: 14px
}

.logo-img {
  display: block;
  height: 36px;
  width: auto;
  flex: none;
  cursor: pointer;
  transition: transform .5s var(--spring), filter .5s var(--spring)
}

.logo-img:hover {
  transform: scale(1.035);
  filter: drop-shadow(0 2px 6px rgba(206, 27, 40, 0.18))
}

.logo-night {
  display: none !important
}

html.dark .logo-day {
  display: none !important
}

html.dark .logo-night {
  display: block !important
}

.logo-wrap {
  display: inline-flex;
  align-items: center;
  position: relative
}

.logo-wrap .logo-img {
  position: relative
}

.nav-main {
  display: flex;
  gap: 2px;
  align-items: center;
  position: relative;
  transition: gap .5s var(--spring)
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: padding .55s var(--spring), background .4s var(--spring), box-shadow .4s var(--spring),
    color .35s var(--spring), transform .35s var(--spring), width .55s var(--spring)
}

.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0.05) 54%, transparent 76%);
  transform: translateX(-130%);
  transition: transform .7s var(--spring)
}

.nav-link:hover::before {
  transform: translateX(130%)
}

.nav-link:hover {
  color: var(--graphite);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px var(--hair), 0 8px 18px rgba(28, 28, 40, 0.06);
  transform: translateY(-1.5px)
}

.nav-link:active {
  transform: translateY(0) scale(0.96);
  transition: transform .15s var(--spring)
}

.nav-ic {
  display: none;
  width: 16px;
  height: 16px;
  flex: none;
  align-items: center;
  justify-content: center;
  transition: width .5s var(--spring), height .5s var(--spring)
}

.nav-ic svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  transition: transform .5s var(--springy), width .5s var(--spring), height .5s var(--spring)
}

.nav-link:hover .nav-ic svg {
  transform: scale(1.08)
}

.nav-lbl {
  display: inline-block;
  max-width: 200px;
  opacity: 1;
  transition: max-width .55s var(--spring), opacity .35s var(--spring), margin .55s var(--spring)
}

.nav-link.on {
  color: var(--graphite);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px var(--hair), 0 10px 24px rgba(28, 28, 40, 0.10)
}

/* ============================================================
   TRUE ADAPTIVE NAV — two distinct states, spring-animated between
   them. Compact = vertically shrunk, icon-first floating glass
   pills; labels return on hover (pointer) or stay for the active
   page. Applies identically on every breakpoint, desktop to phone.
   ============================================================ */
.nav-main.compact {
  gap: 5px
}

.nav-main.compact .nav-link {
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 1px rgba(28, 28, 40, 0.055), 0 3px 10px rgba(28, 28, 40, 0.05)
}

.nav-main.compact .nav-link:hover {
  background: rgba(255, 255, 255, 0.88)
}

.nav-main.compact .nav-ic {
  display: inline-flex
}

.nav-main.compact .nav-ic svg {
  width: 15px;
  height: 15px
}

.nav-main.compact .nav-lbl {
  max-width: 0;
  opacity: 0;
  margin-inline-start: 0
}

.nav-main.compact .nav-link:hover .nav-lbl,
.nav-main.compact .nav-link.on .nav-lbl {
  max-width: 200px;
  opacity: 1;
  margin-inline-start: 7px
}

.nav-main.compact .nav-link .nav-lbl {
  margin-inline-start: 0
}

.nav-main.compact .nav-link:hover .nav-ic,
.nav-main.compact .nav-link.on .nav-ic {
  margin-inline-end: 1px
}

.nav-main.compact .nav-link.on {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px var(--hair), 0 8px 18px rgba(28, 28, 40, 0.12)
}

.nav-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center
}

[dir="rtl"] .nav-right {
  margin-left: 0;
  margin-right: auto
}

.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  transition: all .45s var(--spring)
}

.icon-btn:hover {
  color: var(--graphite);
  transform: translateY(-2px)
}

.icon-btn:active {
  transform: translateY(0) scale(0.9)
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  transition: width .45s var(--spring), height .45s var(--spring)
}

.topnav-inner.shrink .icon-btn {
  width: 32px;
  height: 32px
}

.topnav-inner.shrink .icon-btn svg {
  width: 14px;
  height: 14px
}

.topnav-inner.shrink .logo-img {
  height: 29px
}

.appearance-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  flex: none
}

.appearance-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .3s var(--spring)
}

.appearance-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

.appearance-btn:hover {
  color: var(--graphite)
}

.appearance-btn[aria-checked="true"] {
  background: rgba(206, 27, 40, 0.12);
  color: var(--red)
}

.appearance-btn:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px
}

.topnav-inner.shrink .appearance-btn {
  width: 26px;
  height: 26px
}

.topnav-inner.shrink .appearance-btn svg {
  width: 12px;
  height: 12px
}

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 4px 10px rgba(206, 27, 40, 0.35)
}

.lang-wrap {
  position: relative
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  padding: 8px;
  border-radius: var(--r-lg);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: all .4s var(--spring)
}

[dir="rtl"] .lang-menu {
  right: auto;
  left: 0
}

.lang-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  background: white;
}

.lang-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 10px 12px;
  border-radius: var(--r-md);
  transition: all .3s var(--spring)
}

.lang-item:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--graphite)
}

.lang-item.on {
  color: var(--red);
  font-weight: 600
}

/* ---------- Download Center (nav dropdown) ---------- */
.dl-wrap {
  position: relative
}

.dl-menu {
  min-width: 280px;
  max-height: 70vh;
  overflow-y: auto
}

.dl-menu-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 12px 6px
}

.dl-item {
  gap: 10px;
  text-align: left;
  text-decoration: none
}

.dl-item svg {
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  opacity: .55
}

.dl-item:hover svg {
  opacity: 1
}

.dl-item-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.dl-item-t small {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3)
}

.dl-item-soon {
  cursor: default;
  opacity: .55
}

.dl-item-soon:hover {
  background: transparent
}

/* ---------- Appearance dropdown (nav) ---------- */
.ap-wrap {
  position: relative
}

.ap-btn .ap-ic {
  display: none;
  place-items: center;
  width: 16px;
  height: 16px
}

.ap-btn .ap-ic svg {
  width: 16px;
  height: 16px
}

html[data-appearance="system"] .ap-btn .ap-ic[data-ap="system"],
html[data-appearance="light"] .ap-btn .ap-ic[data-ap="light"],
html[data-appearance="dark"] .ap-btn .ap-ic[data-ap="dark"] {
  display: grid
}

.ap-menu.appearance-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 188px;
  padding: 6px
}

.ap-k {
  padding: 8px 10px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.ap-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: start;
  transition: background .25s var(--spring), color .25s
}

.ap-opt svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

.ap-opt:hover,
.ap-opt:focus-visible {
  outline: none;
  background: rgba(28, 28, 40, 0.05);
  color: var(--graphite)
}

.ap-opt[aria-checked="true"] {
  color: var(--graphite)
}

.ap-opt[aria-checked="true"] svg {
  color: var(--red)
}

.ap-check {
  margin-inline-start: auto;
  width: 14px;
  height: 14px;
  opacity: 0
}

.ap-check::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  margin: 1px auto 0;
  border: solid var(--red);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.ap-opt[aria-checked="true"] .ap-check {
  opacity: 1
}

/* ---------- Mobile burger + menu sheet ----------
   Hidden by default (desktop); shown only under the 900px breakpoint
   below, replacing .nav-main so phones/small tablets get one compact
   header row instead of a wrapped second row. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.menu-btn {
  display: none
}

.menu-btn .mb {
  position: relative;
  width: 18px;
  height: 12px;
  display: block
}

.menu-btn .mb i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: top .35s var(--spring), transform .35s var(--spring)
}

.menu-btn .mb i:nth-child(1) {
  top: 2px
}

.menu-btn .mb i:nth-child(2) {
  top: 8.6px
}

html.menu-open .menu-btn .mb i:nth-child(1) {
  top: 5.3px;
  transform: rotate(45deg)
}

html.menu-open .menu-btn .mb i:nth-child(2) {
  top: 5.3px;
  transform: rotate(-45deg)
}

.msheet {
  position: fixed;
  inset: 0;
  z-index: 299;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear .55s
}

.msheet.open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s
}

.msheet-scrim {
  position: absolute;
  inset: 0;
    background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  opacity: 0;
  transition: opacity .45s var(--spring)
}

.msheet.open .msheet-scrim {
  opacity: 1
}

.msheet-panel {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(var(--util-h) + 74px);
  max-height: calc(100vh - var(--util-h) - 94px);
  overflow-y: auto;
  border-radius: 22px;
  padding: 14px;
  transform-origin: calc(100% - 28px) -12px;
  transform: translateY(-12px) scale(0.96);
  opacity: 0;
  transition: transform .5s var(--springy), opacity .3s var(--spring)
}

.msheet.open .msheet-panel {
  transform: none;
  opacity: 1
}

.msheet-links {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.msheet-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--graphite);
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .3s var(--spring)
}

.msheet-link .nav-ic {
  display: inline-flex;
  color: var(--ink-2)
}

.msheet-link:hover,
.msheet-link.on {
  background: rgba(206, 27, 40, 0.08);
  color: var(--red)
}

.msheet-link.on .nav-ic {
  color: var(--red)
}

.msheet-rule {
  height: 1px;
  background: var(--hair);
  margin: 8px 4px
}

.msheet-dl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px
}

/* accordion chevron */
.msheet-dl-head svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s var(--spring)
}

.msheet-dl-head[aria-expanded="true"] svg {
  transform: rotate(180deg)
}

.msheet-dl-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease
}

.msheet-dl-list.open {
  max-height: 260px;
  overflow-y: auto
}

.msheet-dl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  color: var(--graphite);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: background .3s var(--spring)
}

.msheet-dl-item small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 2px
}

.msheet-dl-item svg {
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  opacity: .55
}

.msheet-dl-item:hover {
  background: rgba(28, 28, 40, 0.045)
}

.msheet-dl-item.is-soon {
  cursor: default;
  opacity: .55
}

.msheet-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 6px 4px
}

html.dark .msheet-scrim {
  background: rgba(0, 0, 0, 0.45)
}

/* ---------- Views ---------- */
.view {
  display: none;
  max-width: 1520px;
  margin: 0 auto;
  padding: calc(104px + var(--util-h)) 16px 60px;
  animation: viewIn .6s var(--spring)
}

.view.on {
  display: block
}

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.995)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--spring), transform .8s var(--spring)
}

.reveal.in {
  opacity: 1;
  transform: none
}

/* ---------- Home hero ---------- */
.hero {
  padding: 70px 56px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 50px;
  align-items: center;
  overflow: hidden;
  position: relative;
  min-height: 480px
}

.hero .lede {
  margin: 24px 0 34px
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.hero-obj {
  position: relative;
  height: 380px
}

.slab {
  position: absolute;
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, rgba(150, 180, 230, 0.13), rgba(255, 255, 255, 0.22) 45%, rgba(120, 150, 210, 0.06));
  box-shadow: 0 28px 64px rgba(30, 40, 80, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 1px rgba(30, 40, 80, 0.08)
}

.slab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(30, 40, 80, 0.09) 48%, rgba(160, 185, 235, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude
}

.slab-a {
  right: 8%;
  top: 4%;
  width: 56%;
  height: 78%;
  transform: rotate(9deg)
}

.slab-b {
  right: 40%;
  top: 26%;
  width: 34%;
  height: 50%;
  transform: rotate(-8deg);
  opacity: .6
}

.h-energy {
  position: absolute;
  right: 8%;
  top: 4%;
  width: 56%;
  height: 78%;
  border-radius: var(--r-xl);
  transform: rotate(9deg);
  overflow: hidden;
  pointer-events: none
}

.h-energy span {
  position: absolute;
  left: -14%;
  top: 50%;
  width: 128%;
  height: 3.5px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, rgba(226, 38, 51, 0.75) 40%, #FF5A64 50%, rgba(226, 38, 51, 0.75) 60%, transparent);
  box-shadow: 0 0 20px rgba(206, 27, 40, 0.35);
  animation: breathe 5s ease-in-out infinite
}

@keyframes breathe {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .45
  }
}

/* ---------- Hero rotator — ambient life ---------- */
.hero-obj {
  perspective: 1600px
}

.hero-obj::before {
  content: "";
  position: absolute;
  right: 4%;
  top: 0%;
  width: 62%;
  height: 84%;
  border-radius: var(--r-xl);
  background: radial-gradient(60% 60% at 50% 50%, rgba(206, 27, 40, 0.24), transparent 72%);
  filter: blur(34px);
  opacity: 0;
  z-index: 0;
  transform: scale(1);
  transition: opacity .6s ease, transform 1s var(--spring);
  pointer-events: none
}

.hero-obj.is-flipping::before {
  opacity: 1;
  transform: scale(1.14)
}

@keyframes heroFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-9px)
  }
}

#heroFlipStage,
#heroPeekA,
#heroPeekB {
  animation: heroFloat 6s ease-in-out infinite
}

#heroPeekA {
  animation-delay: .35s
}

#heroPeekB {
  animation-delay: .9s
}

.hero-obj.is-flipping #heroFlipStage,
#heroPeekA.is-shuffling,
#heroPeekB.is-shuffling {
  animation-play-state: paused
}

#heroPeekA,
#heroPeekB {
  transition: opacity .8s ease, transform .8s var(--spring)
}

#heroPeekA.is-shuffling,
#heroPeekB.is-shuffling {
  transform: rotate(9deg) scale(1.02)
}

#heroPeekB.is-shuffling {
  transform: rotate(15deg) scale(1.03)
}

@keyframes heroKenBurns {
  0% {
    transform: scale(1.04)
  }

  100% {
    transform: scale(1.13)
  }
}

#heroFlipFrontImg,
#heroFlipBackImg {
  animation: heroKenBurns 6.4s ease-in-out infinite alternate
}

.hero-dots {
  position: absolute;
  left: 2%;
  bottom: 2%;
  z-index: 4;
  display: flex;
  gap: 6px
}

.hero-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 4px rgba(28, 28, 40, 0.25);
  transition: width .4s var(--spring), background .4s ease
}

.hero-dot.on {
  width: 18px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #CE1B28, #FF5A64)
}

@media (prefers-reduced-motion: reduce) {

  .hero-obj::before,
  #heroFlipStage,
  #heroPeekA,
  #heroPeekB,
  #heroFlipFrontImg,
  #heroFlipBackImg {
    animation: none !important;
    transition: none !important
  }
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px
}

.home-card {
  padding: 30px;
  cursor: pointer
}

.home-card .hc-ic {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair)
}

.home-card .hc-ic svg {
  width: 18px;
  height: 18px;
  stroke: var(--red);
  fill: none;
  stroke-width: 1.8
}

.home-card .hc-ic-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block
}

.home-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px
}

.home-card p {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1.6
}

/* ---------- Section head ---------- */
.sec-head {
  margin: 34px 0 26px
}

.sec-head .lede {
  margin-top: 12px
}

/* ---------- Solutions city ---------- */
.city-stage {
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-xl)
}

.city-top {
  padding: 44px 52px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap
}

.city-svg-wrap {
  padding: 10px 26px 26px
}

.city-svg-wrap svg {
  width: 100%;
  height: auto;
  display: block
}

.district {
  cursor: pointer;
  transition: transform .6s var(--spring), filter .6s var(--spring);
  transform-origin: center;
  transform-box: fill-box
}

.district:hover {
  transform: scale(1.045);
  filter: drop-shadow(0 22px 32px rgba(30, 40, 80, 0.22))
}

.d-label {
  pointer-events: none;
  transition: transform .5s var(--spring)
}

.district:hover~.d-label,
.district:hover+.d-label {
  transform: translateY(-2px)
}

.hotspot {
  animation: hpulse 2.6s var(--spring) infinite;
  transform-origin: center;
  transform-box: fill-box;
  transition: transform .4s var(--springy)
}

.district:hover .hotspot {
  transform: scale(1.35)
}

@keyframes hpulse {
  0% {
    opacity: .9;
    transform: scale(.6)
  }

  100% {
    opacity: 0;
    transform: scale(2.2)
  }
}

.sol-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px
}

.sol-card {
  padding: 30px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .5s var(--spring), box-shadow .5s var(--spring)
}

.sol-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 30px 64px rgba(28, 28, 40, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 0 0 1px rgba(206, 27, 40, 0.10)
}

.sol-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.4) 45%, transparent 60%);
  transform: translateX(-140%);
  transition: transform .8s var(--spring)
}

.sol-card:hover::before {
  transform: translateX(60%)
}

.sol-card .sc-k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  transition: color .35s var(--spring)
}

.sol-card:hover .sc-k {
  color: var(--red)
}

.sol-card h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px
}

.sol-card p {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 20px
}

.sol-card .go {
  font-size: 12px;
  font-weight: 600;
  color: var(--graphite)
}

.sol-card .go span {
  color: var(--red);
  transition: transform .35s var(--spring);
  display: inline-block
}

.sol-card:hover .go span {
  transform: translateX(4px)
}

[dir="rtl"] .sol-card:hover .go span {
  transform: translateX(-4px)
}

/* ---------- Solution detail ---------- */
.sol-hero {
  padding: 50px 54px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
  overflow: hidden
}

.sol-scene {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 54px rgba(30, 40, 80, 0.12), inset 0 0 0 1px var(--hair)
}

.sol-scene svg {
  width: 100%;
  height: auto;
  display: block
}

.std-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin: 0 6px 8px 0;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px var(--hair)
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px
}

.benefit-card {
  padding: 24px
}

.benefit-card h5 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px
}

.benefit-card p {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1.6
}

.benefit-card .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--red);
  box-shadow: 0 0 12px rgba(206, 27, 40, 0.45);
  margin-bottom: 14px
}

.prim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px
}

/* ---------- Product tiles ---------- */
.tile {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: transform .5s var(--spring), box-shadow .5s var(--spring)
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0.05) 55%, transparent 70%);
  transform: translateX(-140%) translateY(-40%);
  transition: transform .85s var(--spring)
}

.tile:hover::before {
  transform: translateX(60%) translateY(40%)
}

.tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 64px rgba(28, 28, 40, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 1px rgba(28, 28, 40, 0.05), inset 0 0 0 1px rgba(206, 27, 40, 0.10)
}

.tile-stage {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(240, 241, 245, 0.25) 70%)
}

.tile-stage::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(30, 40, 80, 0.12), transparent 72%);
  transition: transform .5s var(--spring), opacity .5s var(--spring)
}

.tile:hover .tile-stage::after {
  transform: scale(0.85);
  opacity: 0.6
}

/* When a real photo fills the stage, drop the decorative floor shadow */
.tile-stage:has(img)::after,
.pu-pv-stage:has(img)::after {
  display: none
}

.tile-stage svg {
  width: 62%;
  height: 74%;
  filter: drop-shadow(0 12px 18px rgba(30, 40, 80, 0.13));
  transition: transform .55s var(--spring)
}

.tile:hover .tile-stage svg {
  transform: translateY(-7px) scale(1.06)
}

.tile-body {
  padding: 18px 20px 14px
}

.tile-fam {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
  transition: color .35s var(--spring)
}

.tile:hover .tile-fam {
  color: var(--red)
}

.tile-name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35
}

.tile-pn {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 6px;
  letter-spacing: 0.04em
}

.tile-hint {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .45s var(--spring), opacity .3s var(--spring), margin .45s var(--spring);
  font-size: 10px;
  font-weight: 600;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 5px
}

.tile:hover .tile-hint {
  max-height: 20px;
  opacity: 1;
  margin-top: 9px
}

.tile-hint svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  transition: transform .4s var(--spring)
}

.tile:hover .tile-hint svg {
  transform: translateX(3px)
}

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  perspective: 1600px
}

.tile {
  transform-style: preserve-3d;
  will-change: transform
}

.fam-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px
}

.chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  transition: all .35s var(--spring)
}

.chip:hover {
  transform: translateY(-2px);
  color: var(--graphite);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair), 0 8px 18px rgba(28, 28, 40, 0.08)
}

.chip:active {
  transform: translateY(0) scale(0.95)
}

.chip.on {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 8px 20px rgba(206, 27, 40, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.3)
}

/* ---------- Product detail overlay + variations ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(240, 241, 244, 0.8);
  backdrop-filter: blur(5px) saturate(140%);
  -webkit-backdrop-filter: blur(5px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--spring)
}

.overlay.show {
  opacity: 1;
  pointer-events: auto
}

.sheet {
  width: min(1040px, 100%);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  border-radius: var(--r-xl);
  transform: translateY(30px) scale(0.975);
  transition: transform .55s var(--spring);
  overscroll-behavior: contain
}

.overlay.show .sheet {
  transform: none
}

.sheet::-webkit-scrollbar {
  width: 6px
}

.sheet::-webkit-scrollbar-thumb {
  background: var(--lgrey);
  border-radius: var(--r-pill)
}

.sheet-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  z-index: 5;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  font-size: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  transition: all .3s var(--spring)
}

[dir="rtl"] .sheet-close {
  right: auto;
  left: 16px
}

.sheet-close:hover {
  color: var(--red);
  transform: rotate(90deg)
}

.pd-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr
}

.pd-visual {
  padding: 50px 36px;
  display: grid;
  place-items: center;
  min-height: 360px;
  position: relative;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.6), rgba(238, 239, 244, 0.28) 70%)
}

.pd-visual svg {
  width: 78%;
  max-height: 300px;
  filter: drop-shadow(0 22px 36px rgba(30, 40, 80, 0.15))
}

.pd-body {
  padding: 42px 42px 36px
}

.pd-pn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 10px
}

.pd-pn b {
  color: var(--red)
}

.var-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin: 16px 0 4px
}

.var-table th {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--hair)
}

[dir="rtl"] .var-table th {
  text-align: right
}

.var-table td {
  padding: 20px;
  border-bottom: 1px solid var(--hair);
  font-size: 14.5px;
}

.var-row {
  cursor: pointer;
  transition: background .3s var(--spring)
}

.var-row:hover {
  background: rgba(255, 255, 255, 0.7)
}

.var-row.on {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 2.5px 0 0 var(--red)
}

.var-radio {
  width: 15px;
  height: 15px;
  border-radius: var(--r-pill);
  display: inline-block;
  box-shadow: inset 0 0 0 1.5px rgba(28, 28, 40, 0.25);
  transition: all .3s var(--spring);
  vertical-align: middle
}

.var-row.on .var-radio {
  box-shadow: inset 0 0 0 4.5px var(--red)
}

.price-tag {
  font-size: 12px;
  font-weight: 600
}

.price-tag.rfq {
  color: var(--ink-3);
  font-weight: 500;
  font-style: normal
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px var(--hair)
}

.qty button {
  width: 34px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  color: var(--ink-2)
}

.qty input {
  width: 48px;
  height: 36px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  outline: none
}

.pd-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hair)
}

/* ============================================================
   CPQ — product configuration engine (multiselect spec matrix)
   ============================================================ */
.cpq-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 0
}

.cpq-config {
  padding: 38px 40px 30px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  overscroll-behavior: contain
}

.cpq-config::-webkit-scrollbar {
  width: 6px
}

.cpq-config::-webkit-scrollbar-thumb {
  background: var(--lgrey);
  border-radius: var(--r-pill)
}

.cpq-crumb {
  font-size: 10px;
  color: var(--ink-3);
  margin-bottom: 10px;
  letter-spacing: 0.02em
}

.cpq-crumb b {
  color: var(--red)
}

.cpq-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 12px
}

.cpq-intro {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: 640px
}

.cpq-std {
  margin-bottom: 24px
}

.cpq-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3)
}

.cpq-progress .bar {
  flex: 1;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(28, 28, 40, 0.08);
  overflow: hidden
}

.cpq-progress .bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  width: 0;
  background: linear-gradient(90deg, #E22633, #B5121F);
  box-shadow: 0 0 10px rgba(206, 27, 40, 0.4);
  transition: width .6s var(--spring)
}

.cpq-progress b {
  color: var(--red);
  font-variant-numeric: tabular-nums
}

.cpq-spec {
  margin-bottom: 24px;
  animation: paneIn .45s var(--spring)
}

.cpq-spec-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px
}

.cpq-spec-h .lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.cpq-spec-h .req {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(206, 27, 40, 0.08)
}

.cpq-spec-h .chosen {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--graphite)
}

.cpq-spec-h .chosen.empty {
  color: var(--ink-4);
  font-weight: 500
}

/* Segmented control — exclusive short option sets */
.cpq-seg {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  gap: 2px;
  flex-wrap: wrap;
  background: rgba(235, 236, 240, 0.7);
  box-shadow: inset 0 0 0 1px var(--hair)
}

.cpq-seg button {
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: transparent;
  transition: all .35s var(--spring);
  position: relative
}

.cpq-seg button:hover:not(.na) {
  color: var(--graphite)
}

.cpq-seg button.on {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 6px 16px rgba(206, 27, 40, 0.28);
  animation: optSelect .4s var(--springy)
}

.cpq-seg button.na {
  opacity: .32;
  cursor: not-allowed;
  text-decoration: line-through
}

/* Chips — quick multi/exclusive choices */
.cpq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.cpq-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  transition: all .35s var(--spring)
}

.cpq-chip:hover:not(.na) {
  transform: translateY(-2px);
  color: var(--graphite);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair), 0 8px 18px rgba(28, 28, 40, 0.08)
}

.cpq-chip:active:not(.na) {
  transform: translateY(0) scale(0.95)
}

.cpq-chip.on {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 8px 20px rgba(206, 27, 40, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: optSelect .4s var(--springy)
}

.cpq-chip.na {
  opacity: .34;
  cursor: not-allowed;
  filter: saturate(0.4);
  text-decoration: line-through
}

/* Color swatches */
.cpq-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.cpq-swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 8px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  transition: all .35s var(--spring)
}

.cpq-swatch:hover:not(.na) {
  transform: translateY(-2px);
  color: var(--graphite)
}

.cpq-swatch .dot {
  width: 17px;
  height: 17px;
  border-radius: var(--r-pill);
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(28, 28, 40, 0.18)
}

.cpq-swatch.on {
  color: #fff;
  background: linear-gradient(135deg, #2b2e35, #17181c);
  box-shadow: 0 8px 18px rgba(20, 22, 28, 0.2)
}

.cpq-swatch.on .dot {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9)
}

.cpq-swatch.na {
  opacity: .34;
  cursor: not-allowed
}

/* Dense-spec table — for rich technical dimensions */
.cpq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--hair)
}

.cpq-table th {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid var(--hair)
}

[dir="rtl"] .cpq-table th {
  text-align: right
}

.cpq-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--hair)
}

.cpq-table tr:last-child td {
  border-bottom: none
}

.cpq-trow {
  cursor: pointer;
  transition: background .3s var(--spring)
}

.cpq-trow:hover:not(.na) {
  background: rgba(255, 255, 255, 0.7)
}

.cpq-trow.on {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 2.5px 0 0 var(--red)
}

.cpq-trow.na {
  opacity: .36;
  cursor: not-allowed
}

.cpq-radio {
  width: 15px;
  height: 15px;
  border-radius: var(--r-pill);
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1.5px rgba(28, 28, 40, 0.25);
  transition: all .3s var(--spring)
}

.cpq-trow.on .cpq-radio {
  box-shadow: inset 0 0 0 4.5px var(--red)
}

/* Sticky selection summary panel */
.cpq-summary {
  background: radial-gradient(150% 120% at 100% 0%, rgba(255, 255, 255, 0.7), rgba(248, 249, 251, 0.5));
  box-shadow: inset 1px 0 0 var(--hair);
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative
}

.cpq-sum-inner {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  height: 100%
}

.cpq-visual {
  height: 150px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  position: relative;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.7), rgba(238, 239, 244, 0.35) 70%);
  box-shadow: inset 0 0 0 1px var(--hair)
}

.cpq-visual svg {
  width: 58%;
  height: 74%;
  filter: drop-shadow(0 14px 20px rgba(30, 40, 80, 0.14));
  transition: transform .5s var(--spring)
}

.cpq-pn-live {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--graphite);
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px var(--hair);
  margin-bottom: 6px;
  word-break: break-all;
  transition: all .3s var(--spring);
  font-variant-numeric: tabular-nums
}

.cpq-pn-live.locked {
  box-shadow: inset 0 0 0 1.5px rgba(206, 27, 40, 0.4);
  animation: pnLock .5s var(--springy)
}

@keyframes pnLock {
  0% {
    transform: scale(0.98)
  }

  55% {
    transform: scale(1.02)
  }

  100% {
    transform: scale(1)
  }
}

.cpq-pn-live b {
  color: var(--red)
}

.cpq-pn-cap {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px
}

.cpq-sel-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px
}

.cpq-sel-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--hair)
}

.cpq-sel-row .k {
  color: var(--ink-3);
  font-weight: 500
}

.cpq-sel-row .v {
  font-weight: 700;
  text-align: end;
  color: var(--graphite)
}

.cpq-sel-row .v.pending {
  color: var(--ink-4);
  font-weight: 500;
  font-style: italic
}

.cpq-validity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  margin: 16px 0 4px
}

.cpq-validity .vdot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill)
}

.cpq-validity.ok {
  color: #256B2E
}

.cpq-validity.ok .vdot {
  background: #3E9B4F;
  box-shadow: 0 0 10px rgba(62, 155, 79, 0.55)
}

.cpq-validity.no {
  color: #8a4a12
}

.cpq-validity.no .vdot {
  background: #D98324;
  box-shadow: 0 0 10px rgba(217, 131, 36, 0.55)
}

.cpq-price {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 12px 0 2px
}

.cpq-price.rfq {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3)
}

.cpq-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
  padding-top: 18px
}

.cpq-actions .btn {
  width: 100%
}

.cpq-actions .btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  filter: saturate(0.5);
  transform: none !important;
  box-shadow: none
}

.cpq-na-note {
  font-size: 10.5px;
  font-weight: 500;
  color: #8a4a12;
  line-height: 1.5;
  padding: 11px 14px;
  border-radius: var(--r-md);
  margin-top: 12px;
  background: rgba(255, 244, 230, 0.8);
  box-shadow: inset 0 0 0 1px rgba(200, 120, 40, 0.25)
}

.cpq-related {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--hair)
}

@media (max-width:900px) {
  .cpq-grid {
    grid-template-columns: 1fr
  }

  .cpq-summary {
    order: -1;
    box-shadow: inset 0 -1px 0 var(--hair)
  }

  .cpq-config {
    max-height: none
  }
}

/* ---------- Configurator ---------- */
.cfg-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px
}

.cfg-shell {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items: start;
  margin-top: 18px
}

.cfg-main {
  padding: 36px 40px
}

.cfg-steps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 26px
}

.step-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: all .4s var(--spring)
}

.step-pill:hover {
  color: var(--graphite);
  transform: translateY(-1.5px);
  box-shadow: inset 0 0 0 1px var(--hair), 0 6px 14px rgba(28, 28, 40, 0.06)
}

.step-pill .n {
  width: 17px;
  height: 17px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  background: rgba(28, 28, 40, 0.08);
  color: var(--ink-2)
}

.step-pill.on {
  color: var(--graphite);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(206, 27, 40, 0.25), 0 8px 18px rgba(28, 28, 40, 0.07)
}

.step-pill.on .n {
  background: linear-gradient(135deg, #E22633, #B5121F);
  color: #fff
}

.step-pill.done .n {
  background: var(--graphite);
  color: #fff
}

.opt-group {
  margin-bottom: 26px;
  animation: paneIn .5s var(--spring)
}

@keyframes paneIn {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.opt-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px
}

.opt-help {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-4)
}

.opt-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap
}

.opt {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 11px 18px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  transition: all .4s var(--spring)
}

.opt:hover:not(.na) {
  transform: translateY(-2.5px);
  color: var(--graphite);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px rgba(206, 27, 40, 0.25), 0 10px 20px rgba(28, 28, 40, 0.08)
}

.opt:active:not(.na) {
  transform: translateY(0) scale(0.96)
}

.opt.on {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 8px 20px rgba(206, 27, 40, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: optSelect .45s var(--springy)
}

@keyframes optSelect {
  0% {
    transform: scale(0.94)
  }

  50% {
    transform: scale(1.04)
  }

  100% {
    transform: scale(1)
  }
}

.opt.na {
  opacity: .4;
  cursor: not-allowed;
  filter: saturate(0.4);
  background: rgba(240, 241, 245, 0.5);
  box-shadow: inset 0 0 0 1px var(--hair)
}

.cfg-note {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  padding: 12px 16px;
  border-radius: var(--r-md);
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--hair)
}

.cfg-note.warn {
  color: #8a4a12;
  background: rgba(255, 244, 230, 0.8);
  box-shadow: inset 0 0 0 1px rgba(200, 120, 40, 0.25)
}

.cfg-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--hair)
}

.cfg-side {
  position: sticky;
  top: 96px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 0
}

.cfg-preview {
  height: 170px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.6), rgba(238, 239, 244, 0.3) 70%);
  box-shadow: inset 0 0 0 1px var(--hair)
}

.cfg-preview svg {
  width: 60%;
  height: 76%;
  filter: drop-shadow(0 14px 20px rgba(30, 40, 80, 0.14))
}

.pn-live {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--graphite);
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px var(--hair);
  margin-bottom: 14px;
  word-break: break-all;
  transition: all .3s var(--spring)
}

.pn-live b {
  color: var(--red)
}

.sum-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 11.5px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--hair)
}

.sum-row span {
  color: var(--ink-3);
  font-weight: 500
}

.sum-row b {
  font-weight: 600;
  text-align: right
}

.cfg-side .btn {
  width: 100%;
  margin-top: 10px
}

.validity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  margin: 14px 0 4px
}

.validity .vdot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill)
}

.validity.ok {
  color: #256B2E
}

.validity.ok .vdot {
  background: #3E9B4F;
  box-shadow: 0 0 10px rgba(62, 155, 79, 0.5)
}

.validity.no {
  color: #8a4a12
}

.validity.no .vdot {
  background: #D98324;
  box-shadow: 0 0 10px rgba(217, 131, 36, 0.5)
}

/* ---------- Cart drawer ---------- */
.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(440px, 94vw);
  z-index: 500;
  padding: 22px;
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: transform .6s var(--spring);
  border-radius: 0 0 0 var(--r-xl)
}

[dir="rtl"] .drawer {
  right: auto;
  left: 0;
  transform: translateX(-110%);
  border-radius: 0 0 var(--r-xl) 0
}

.drawer.open {
  transform: none
}

.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px
}

.drawer-body::-webkit-scrollbar {
  width: 5px
}

.drawer-body::-webkit-scrollbar-thumb {
  background: var(--lgrey);
  border-radius: var(--r-pill)
}

.cart-item {
  padding: 14px 16px;
  border-radius: var(--r-lg);
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair)
}

.cart-item svg {
  width: 44px;
  height: 38px;
  flex: none
}

.cart-item .ci-img {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9)
}

.ci-info {
  flex: 1;
  min-width: 0
}

.ci-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3
}

.ci-pn {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 3px;
  letter-spacing: 0.04em
}

.ci-price {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 4px
}

.ci-price.rfq {
  color: var(--ink-3);
  font-weight: 500
}

.ci-x {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-3);
  font-size: 13px;
  padding: 4px
}

.ci-x:hover {
  color: var(--red)
}

.drawer-foot {
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 9px
}

.total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 2px
}

.total-row span {
  color: var(--ink-3);
  font-weight: 500;
  font-size: 11.5px
}

/* ---------- Knowledge hub / partners ---------- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px
}

.hub-card {
  padding: 30px;
  cursor: pointer
}

.hub-card .hc-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  margin-bottom: 16px;
  background: rgba(206, 27, 40, 0.07);
  box-shadow: inset 0 0 0 1px rgba(206, 27, 40, 0.15)
}

.hub-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px
}

.hub-card p {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1.65;
  margin-bottom: 16px
}

.locked-banner {
  padding: 40px;
  text-align: center
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px
}

.partner-card {
  padding: 28px
}

.partner-card h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px
}

.partner-card .pc-region {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px
}

.partner-card a {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  margin-top: 7px
}

.partner-card a:hover {
  color: var(--red)
}

/* ---------- Think With AI ---------- */
.ai-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: start
}

.ai-side {
  padding: 26px;
  position: sticky;
  top: 96px
}

.ai-side h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 14px
}

.ai-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: var(--r-md);
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px var(--hair);
  cursor: pointer;
  transition: all .35s var(--spring)
}

.ai-hint:hover {
  color: var(--graphite);
  transform: translateY(-2px) translateX(2px);
  box-shadow: inset 0 0 0 1px rgba(206, 27, 40, 0.18), 0 10px 20px rgba(28, 28, 40, 0.07)
}

[dir="rtl"] .ai-hint:hover {
  transform: translateY(-2px) translateX(-2px)
}

.ai-hint:active {
  transform: translateY(0) scale(0.98)
}

#aiSend.breathing {
  animation: sendBreathe 2.2s ease-in-out infinite
}

@keyframes sendBreathe {

  0%,
  100% {
    box-shadow: 0 10px 24px rgba(206, 27, 40, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.32)
  }

  50% {
    box-shadow: 0 14px 32px rgba(206, 27, 40, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4)
  }
}

.file-pill {
  transition: transform .35s var(--spring), box-shadow .35s var(--spring)
}

.file-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(28, 28, 40, 0.08)
}

.ai-main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 150px);
  min-height: 480px;
  overflow: hidden
}

.ai-head {
  padding: 20px 26px;
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 12px
}

.ai-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: #3E9B4F;
  box-shadow: 0 0 10px rgba(62, 155, 79, 0.5)
}

.ai-log {
  flex: 1;
  overflow-y: auto;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.ai-log::-webkit-scrollbar {
  width: 5px
}

.ai-log::-webkit-scrollbar-thumb {
  background: var(--lgrey);
  border-radius: var(--r-pill)
}

.msg {
  max-width: 78%;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  animation: paneIn .45s var(--spring)
}

.msg.user {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, #2b2e35, #17181c);
  box-shadow: 0 10px 22px rgba(20, 22, 28, 0.18)
}

[dir="rtl"] .msg.user {
  align-self: flex-start
}

.msg.bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair)
}

[dir="rtl"] .msg.bot {
  align-self: flex-end
}

.msg.bot table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin: 8px 0
}

.msg.bot th {
  text-align: left;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 8px;
  border-bottom: 1px solid var(--hair)
}

.msg.bot td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--hair)
}

/* ---------- Thinking indicator — small animating robot + label ---------- */
.msg.thinking {
  display: flex;
  align-items: center;
  gap: 10px
}

.ai-bot-ic {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  animation: botBob 1.8s ease-in-out infinite
}

.ai-bot-ic svg {
  width: 26px;
  height: 26px
}

@keyframes botBob {

  0%,
  100% {
    transform: translateY(0) rotate(0)
  }

  50% {
    transform: translateY(-3px) rotate(-3deg)
  }
}

.ai-bot-eye {
  animation: botBlink 2.6s ease-in-out infinite
}

@keyframes botBlink {

  0%,
  88%,
  100% {
    opacity: 1
  }

  92% {
    opacity: 0.15
  }
}

.ai-bot-antenna {
  animation: botPing 1.8s ease-in-out infinite
}

@keyframes botPing {

  0%,
  100% {
    opacity: .5;
    transform: scale(1)
  }

  50% {
    opacity: 1;
    transform: scale(1.3)
  }
}

.ai-thinking-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 2px
}

.ai-thinking-dots span {
  animation: thinkDot 1.4s ease-in-out infinite;
  opacity: .2
}

.ai-thinking-dots span:nth-child(2) {
  animation-delay: .2s
}

.ai-thinking-dots span:nth-child(3) {
  animation-delay: .4s
}

@keyframes thinkDot {

  0%,
  60%,
  100% {
    opacity: .2
  }

  30% {
    opacity: 1
  }
}

/* ---------- Inline product links inside AI responses ---------- */
.ai-plink {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px dotted rgba(206, 27, 40, 0.45);
  transition: all .3s var(--spring);
  cursor: pointer
}

.ai-plink:hover {
  border-bottom-style: solid;
  background: rgba(206, 27, 40, 0.08);
  border-radius: 3px
}

.ai-input {
  display: flex;
  gap: 10px;
  padding: 18px 22px;
  border-top: 1px solid var(--hair);
  align-items: flex-end
}

.ai-input textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  font-size: 13px;
  line-height: 1.5;
  max-height: 120px;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow .3s var(--spring)
}

.ai-input textarea:focus {
  box-shadow: inset 0 0 0 1.5px rgba(206, 27, 40, 0.35)
}

.file-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px var(--hair);
  margin: 0 6px 6px 0
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: -1px;
  left: 50%;
  transform: translate(-50%, 140%);
  z-index: 10050;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  transition: transform .55s var(--springy);
  background: #c51926;
}

.toast.show {
  transform: translate(-50%, 0)
}

/* ---------- Compare ---------- */
.compare-drawer {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 140%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 20px;
  border-radius: var(--r-pill);
  transition: transform .55s var(--springy)
}

.compare-drawer.show {
  transform: translate(-50%, 0)
}

.compare-drawer .cmp-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2)
}

.cmp-items {
  display: flex;
  gap: 8px
}

.cmp-item {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair)
}

.cmp-item svg {
  width: 26px;
  height: 22px
}

.cmp-item button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  color: #fff;
  background: var(--graphite);
  display: grid;
  place-items: center
}

.var-table td:first-child {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap
}

/* ---------- About ---------- */
.about-hero {
  padding: 56px 54px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
  overflow: hidden
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px
}

.about-stat {
  padding: 26px 22px
}

.about-stat b {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  display: block
}

.about-stat b em {
  font-style: normal;
  color: var(--red)
}

.about-stat span {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
  margin-top: 8px
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px
}

.pillar-card {
  padding: 26px
}

.pillar-card .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--red);
  box-shadow: 0 0 12px rgba(206, 27, 40, 0.45);
  margin-bottom: 14px
}

.pillar-card h5 {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 6px
}

.pillar-card p {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1.6
}

.cert-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px
}

.cert-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair)
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px
}

.contact-form {
  padding: 38px
}

.field {
  margin-bottom: 16px
}

.field label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  display: block
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--graphite);
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow .3s var(--spring)
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  box-shadow: inset 0 0 0 1.5px rgba(206, 27, 40, 0.35)
}

.field textarea {
  resize: vertical;
  min-height: 100px
}

.contact-info {
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 18px
}

.ci-row {
  display: flex;
  gap: 14px;
  align-items: flex-start
}

.ci-row .ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair)
}

.ci-row .ic svg {
  width: 16px;
  height: 16px;
  stroke: var(--red);
  fill: none;
  stroke-width: 1.8
}

.ci-row h5 {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 4px
}

.ci-row p {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.6
}

.map-card {
  height: 100%;
  border-radius: var(--r-lg);
  margin-top: 6px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, rgba(150, 180, 230, 0.16), rgba(240, 241, 245, 0.3) 70%);
  box-shadow: inset 0 0 0 1px var(--hair)
}

/* ---------- Advanced Product Filters ---------- */
.pf-shell {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 18px;
  align-items: start
}

.pf-side {
  position: sticky;
  top: 96px;
  padding: 26px 22px;
  max-height: calc(100vh - 116px);
  overflow-y: auto
}

.pf-side::-webkit-scrollbar {
  width: 5px
}

.pf-side::-webkit-scrollbar-thumb {
  background: var(--lgrey);
  border-radius: var(--r-pill)
}

.pf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px
}

.pf-head h4 {
  font-size: 13px;
  font-weight: 600
}

.pf-clear {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--red);
  border: none;
  background: transparent;
  cursor: pointer
}

.pf-group {
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hair)
}

.pf-group-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 2px;
  cursor: pointer;
  user-select: none
}

.pf-group-h span.t {
  font-size: 11.5px;
  font-weight: 600
}

.pf-group-h span.n {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: rgba(28, 28, 40, 0.06);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  margin-inline-start: 6px
}

.pf-group-h svg {
  width: 9px;
  height: 9px;
  stroke: var(--ink-3);
  stroke-width: 2.4;
  fill: none;
  transition: transform .4s var(--spring)
}

.pf-group.open .pf-group-h svg {
  transform: rotate(180deg)
}

.pf-group-b {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--spring);
  padding: 0 2px
}

.pf-group.open .pf-group-b {
  max-height: 400px;
  padding-bottom: 14px
}

.pf-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: all .3s var(--spring)
}

.pf-opt:hover {
  color: var(--graphite);
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(2px);
  box-shadow: inset 0 0 0 1px rgba(206, 27, 40, 0.08)
}

[dir="rtl"] .pf-opt:hover {
  transform: translateX(-2px)
}

.pf-opt:active .pf-box {
  transform: scale(0.85)
}

.pf-box {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  flex: none;
  box-shadow: inset 0 0 0 1.5px rgba(28, 28, 40, 0.25);
  position: relative;
  transition: all .35s var(--springy)
}

.pf-opt:hover .pf-box {
  box-shadow: inset 0 0 0 1.5px rgba(206, 27, 40, 0.45)
}

.pf-opt.on .pf-box {
  background: linear-gradient(135deg, #E22633, #B5121F) !important;
  box-shadow: none;
  animation: boxPress .4s var(--springy)
}

@keyframes boxPress {
  0% {
    transform: scale(1)
  }

  40% {
    transform: scale(1.22)
  }

  100% {
    transform: scale(1)
  }
}

.pf-opt.on .pf-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.pf-opt .cnt {
  margin-inline-start: auto;
  font-size: 10px;
  color: var(--ink-4);
  transition: color .3s var(--spring)
}

.pf-opt:hover .cnt {
  color: var(--red)
}

.pf-swatch {
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(28, 28, 40, 0.15)
}

.pf-range {
  padding: 4px 2px 2px
}

.pf-range input[type=range] {
  width: 100%;
  accent-color: var(--red)
}

.pf-range .rv {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  margin-top: 4px
}

.active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px
}

.a-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--graphite);
  padding: 8px 8px 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(206, 27, 40, 0.18)
}

[dir="rtl"] .a-chip {
  padding: 8px 14px 8px 8px
}

.a-chip button {
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  background: rgba(28, 28, 40, 0.08);
  color: var(--ink-2);
  font-size: 9px;
  display: grid;
  place-items: center
}

.a-chip button:hover {
  background: var(--red);
  color: #fff
}

.pf-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 14px
}

.pf-search {
  position: relative;
  flex: 1;
  min-width: 200px
}

.pf-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 2
}

[dir="rtl"] .pf-search svg {
  left: auto;
  right: 16px
}

.pf-search input {
  width: 100%;
  border: none;
  outline: none;
  font-family: var(--font);
  font-size: 13px;
  padding: 11px 16px 11px 40px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  transition: box-shadow .3s var(--spring)
}

[dir="rtl"] .pf-search input {
  padding: 11px 40px 11px 16px
}

.pf-search input:focus {
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1.5px rgba(206, 27, 40, 0.4)
}

.pf-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 8px;
  border-radius: var(--r-lg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: all .35s var(--spring)
}

.pf-suggest.open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  background-color: white;
}

.pf-suggest-item {
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  cursor: pointer;
  transition: background .25s;
  margin: 4px 0;
}

.pf-suggest-item:hover {
  background: #ce1b2833;
  border: 1px solid #ce1b2891;
}

.pf-suggest-item b {
  color: var(--red)
}

.pf-view-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(235, 236, 240, 0.7)
}

.pf-view-toggle button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: transparent
}

.pf-view-toggle button.on {
  background: #fff;
  color: var(--graphite);
  box-shadow: 0 3px 10px rgba(28, 28, 40, 0.10)
}

.pf-view-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8
}

.pf-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3)
}

.pf-count b {
  color: var(--red);
  font-size: 14px
}

.cmp-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px
}

.cmp-switch {
  width: 36px;
  height: 20px;
  border-radius: var(--r-pill);
  background: rgba(28, 28, 40, 0.12);
  position: relative;
  cursor: pointer;
  transition: background .3s
}

.cmp-switch.on {
  background: linear-gradient(135deg, #E22633, #B5121F)
}

.cmp-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  background: #fff;
  transition: transform .3s var(--spring);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2)
}

.cmp-switch.on::after {
  transform: translateX(16px)
}

[dir="rtl"] .cmp-switch.on::after {
  transform: translateX(-16px)
}

.pv-mini {
  padding: 10px;
  cursor: pointer
}

.pv-mini .tile-stage {
  aspect-ratio: 1 / 1
}

.pf-empty {
  padding: 70px 30px;
  text-align: center;
  grid-column: 1/-1
}

/* ============================================================
   PRODUCT UNIVERSE — exact nested taxonomy tree + preview panel
   ============================================================ */
.pu-shell {
  grid-template-columns: 290px 1fr 320px
}

.pu-tree-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
  position: relative;
  padding-inline-start: 14px
}

.pu-tree-title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--red)
}

.pu-tree-sub {
  font-size: 10px;
  color: var(--ink-3);
  margin: 0 0 14px 14px
}

.pu-branch {
  margin-bottom: 1px
}

.pu-branch[data-depth="0"] {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hair)
}

.pu-branch[data-depth="0"]:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0
}

.pu-node {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
  transition: background .35s var(--spring), color .3s var(--spring), transform .35s var(--spring), box-shadow .35s var(--spring)
}

.pu-node:hover {
  background: radial-gradient(140% 220% at 0% 50%, rgba(206, 27, 40, 0.055), rgba(255, 255, 255, 0.55) 60%);
  transform: translateX(3px);
  box-shadow: inset 0 0 0 1px rgba(206, 27, 40, 0.08)
}

[dir="rtl"] .pu-node:hover {
  transform: translateX(-3px)
}

.pu-node:hover .pu-lbl {
  color: var(--graphite);
  letter-spacing: -0.01em
}

.pu-node:active {
  transform: translateX(1px) scale(0.985)
}

.pu-node .pu-chev {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1.4px rgba(206, 27, 40, 0.45);
  color: var(--red);
  transition: all .45s var(--springy)
}

.pu-node:hover .pu-chev {
  box-shadow: inset 0 0 0 1.4px rgba(206, 27, 40, 0.75);
  transform: scale(1.08)
}

.pu-node .pu-chev svg {
  width: 9px;
  height: 9px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.6;
  transition: transform .45s var(--springy)
}

.pu-node.pu-leaf .pu-chev {
  box-shadow: none;
  color: var(--ink-4)
}

.pu-node.pu-leaf:hover .pu-chev {
  box-shadow: none;
  transform: scale(1)
}

.pu-node.pu-open>.pu-chev svg {
  transform: rotate(180deg)
}

.pu-node.pu-bounce>.pu-chev {
  animation: chevBounce .5s var(--springy)
}

@keyframes chevBounce {
  0% {
    transform: scale(1)
  }

  35% {
    transform: scale(1.32)
  }

  65% {
    transform: scale(0.92)
  }

  100% {
    transform: scale(1)
  }
}

.pu-node .pu-lbl {
  flex: 1;
  font-size: 12.6px;
  font-weight: 600;
  color: var(--graphite);
  letter-spacing: -0.005em;
  transition: color .3s var(--spring), letter-spacing .3s var(--spring)
}

.pu-branch[data-depth="0"]>.pu-node .pu-lbl {
  font-size: 13.6px;
  font-weight: 700
}

.pu-branch[data-depth="1"]>.pu-node .pu-lbl {
  font-weight: 600
}

.pu-branch[data-depth="2"]>.pu-node .pu-lbl {
  font-weight: 500;
  color: var(--ink-2)
}

.pu-branch[data-depth="3"]>.pu-node .pu-lbl {
  font-weight: 400;
  color: var(--ink-2)
}

.pu-node.pu-active .pu-lbl {
  color: var(--red)
}

.pu-node .pu-cnt {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-3);
  background: rgba(28, 28, 40, 0.055);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  flex: none;
  min-width: 18px;
  text-align: center;
  transition: all .3s var(--spring)
}

.pu-node:hover .pu-cnt {
  background: rgba(206, 27, 40, 0.10);
  color: var(--red);
  transform: scale(1.06)
}

.pu-node.pu-active .pu-cnt {
  background: rgba(206, 27, 40, 0.14);
  color: var(--red)
}

.pu-kids {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s var(--spring);
  padding-inline-start: 15px;
  border-inline-start: 1.4px dashed rgba(28, 28, 40, 0.09);
  margin-inline-start: 9px
}

.pu-branch.pu-open>.pu-kids {
  max-height: 2600px
}

.pu-kids>.pu-branch {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s var(--spring), transform .4s var(--spring)
}

.pu-branch.pu-open>.pu-kids>.pu-branch.pu-stagger-in {
  opacity: 1;
  transform: none
}

.pu-kids>.pu-branch:nth-child(1) {
  transition-delay: .02s
}

.pu-kids>.pu-branch:nth-child(2) {
  transition-delay: .06s
}

.pu-kids>.pu-branch:nth-child(3) {
  transition-delay: .10s
}

.pu-kids>.pu-branch:nth-child(4) {
  transition-delay: .14s
}

.pu-kids>.pu-branch:nth-child(5) {
  transition-delay: .18s
}

.pu-kids>.pu-branch:nth-child(6) {
  transition-delay: .22s
}

.pu-kids>.pu-branch:nth-child(7) {
  transition-delay: .26s
}

.pu-kids>.pu-branch:nth-child(8) {
  transition-delay: .30s
}

/* ---------- Breadcrumb + branch hero above the grid ---------- */
.pu-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 10px
}

.pu-crumb b {
  color: var(--graphite);
  font-weight: 600
}

.pu-crumb a {
  transition: color .2s var(--spring)
}

.pu-crumb a:hover {
  color: var(--red)
}

.pu-crumb a:hover b {
  color: var(--red)
}

.pd-crumb-link {
  text-decoration: none;
  color: inherit;
  transition: color .2s var(--spring)
}

.pd-crumb-link:hover {
  color: var(--red)
}

.pu-crumb .sep {
  color: var(--ink-4)
}

.pu-branch-head {
  padding: 26px 28px;
  margin-bottom: 16px
}

.pu-branch-head .k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px
}

.pu-branch-head h2 {
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px
}

.pu-branch-head p {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.65;
  max-width: 720px
}

.pu-branch-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hair)
}

.pu-branch-meta div {
  font-size: 10px
}

.pu-branch-meta b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--graphite)
}

.pu-branch-meta span {
  color: var(--ink-3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700
}

/* ---------- List / row view ---------- */
.pu-rows {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.pu-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer
}

.pu-row svg {
  width: 52px;
  height: 44px;
  flex: none
}

.pu-row .pu-info {
  flex: 1;
  min-width: 0
}

.pu-row .pu-info .n {
  font-size: 12.5px;
  font-weight: 600
}

.pu-row .pu-info .m {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 3px
}

.pu-row .pu-arrow {
  color: var(--red);
  font-size: 13px
}

/* ---------- Right preview panel (live, sticky) ---------- */
.pu-preview-panel {
  padding: 0;
  display: flex;
  flex-direction: column
}

.pu-pv-empty {
  padding: 60px 22px;
  text-align: center;
  color: var(--ink-3);
  font-size: 11.5px
}

.pu-pv-stage {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.6), rgba(238, 239, 244, 0.28) 70%)
}

.pu-pv-stage svg {
  width: 56%;
  max-height: 140px;
  filter: drop-shadow(0 14px 22px rgba(30, 40, 80, 0.14))
}

.pu-pv-body {
  padding: 20px 22px 24px
}

.pu-pv-crumb {
  font-size: 9.5px;
  color: var(--ink-3);
  margin-bottom: 9px;
  line-height: 1.6
}

.pu-pv-crumb b {
  color: var(--red);
  font-weight: 600
}

.pu-pv-pn {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 6px
}

.pu-pv-pn b {
  color: var(--graphite)
}

.pu-pv-name {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 9px;
  line-height: 1.3
}

.pu-pv-desc {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.65;
  margin-bottom: 14px
}

.pu-pv-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px
}

.pu-pv-ctas .btn {
  width: 100%
}

.pu-sec-t {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 16px 0 8px
}

.pu-related {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px
}

.pu-related .rc {
  flex: none;
  width: 88px;
  text-align: center;
  cursor: pointer;
  padding: 9px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.6);
  transition: all .3s var(--spring)
}

.pu-related .rc:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px)
}

.pu-related .rc svg {
  width: 100%;
  height: 32px
}

.pu-related .rc div {
  font-size: 8.5px;
  font-weight: 600;
  margin-top: 5px;
  line-height: 1.3
}

@media (max-width:1280px) {
  .pu-shell {
    grid-template-columns: 290px 1fr
  }

  .pu-preview-panel {
    display: none
  }
}

/* ---------- Responsive ---------- */
@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }
}

@media (max-width:1180px) {

  .home-grid,
  .hub-grid,
  .partner-grid,
  .about-stats,
  .pillar-grid,
  .contact-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .hero,
  .about-hero {
    grid-template-columns: 1fr;
    min-height: 0
  }

  .hero-obj {
    display: none
  }

  .sol-hero {
    grid-template-columns: 1fr
  }

  .cfg-shell {
    grid-template-columns: 1fr
  }

  .cfg-side {
    position: static
  }

  .ai-shell {
    grid-template-columns: 1fr
  }

  .ai-side {
    position: static
  }

  .pf-shell {
    grid-template-columns: 1fr
  }

  .pf-side {
    position: static;
    max-height: none
  }
}

@media (max-width:900px) {

  /* Burger menu replaces the row of nav links entirely below 900px — no
     more wrapped/scrolling second row ("chin") under the logo. .msheet
     (built above) carries the full link list, download center, language
     and login instead. */
  .nav-main {
    display: none !important
  }

  .nav-right .appearance-group,
  .nav-right .ap-wrap,
  .nav-right .dl-wrap,
  .nav-right .lang-wrap,
  .nav-right #loginBtn,
  .nav-search-kbd {
    display: none !important
  }

  .menu-btn {
    display: grid
  }

  .sol-cards,
  .benefit-grid,
  .prim-grid,
  .cfg-picker {
    grid-template-columns: 1fr
  }

  .pd-grid {
    grid-template-columns: 1fr
  }

  .pd-visual {
    min-height: 240px
  }

  .city-top {
    padding: 30px 26px 4px
  }

  .hero {
    padding: 38px 28px
  }

  .view {
    padding-top: calc(155px + var(--util-h))
  }

  .search-overlay {
    padding-top: calc(var(--util-h) + 145px)
  }
}

@media (max-width:600px) {

  .home-grid,
  .hub-grid,
  .partner-grid,
  .about-stats,
  .pillar-grid,
  .contact-grid {
    grid-template-columns: 1fr
  }

  .prod-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .view {
    padding-top: calc(156px + var(--util-h))
  }

  .pf-toolbar {
    flex-direction: column;
    align-items: stretch
  }
}

/* ============================================================
   HOME — EXTENDED SECTIONS (manufacturing, engineering, industries,
   global, sustainability, downloads, closing) — scoped hp- prefix,
   reusing the platform's unified radius + glass system
   ============================================================ */
.hp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 6px
}

.hp-stat {
  padding: 32px 30px 28px
}

/* Signature numerics — one consistent Elsewedy digit system across all cards.
   Rolling odometer columns, micro-overshoot into a sentinel digit, soft settle,
   then the red full stop stamps the statement. */
.hp-num {
  display: flex;
  align-items: flex-start;
  gap: 0.015em;
  font-size: clamp(52px, 5.6vw, 92px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
  transform: translateY(2px) scale(0.985);
  transition: transform .55s var(--springy)
}

.hp-num.settled {
  transform: none
}

.hp-num .odo-pre,
.hp-num .odo-suf {
  font-style: normal;
  line-height: 1
}

.hp-count {
  display: inline-flex
}

.odo-col {
  display: inline-block;
  width: 1ch;
  height: 1em;
  overflow: hidden
}

.odo-static {
  display: inline-block;
  height: 1em;
  line-height: 1
}

.odo-strip {
  display: block;
  transition: transform 1.35s cubic-bezier(0.18, 1.08, 0.28, 1);
  will-change: transform
}

.odo-strip i {
  display: block;
  height: 1em;
  line-height: 1;
  font-style: normal;
  text-align: center
}

.hp-dot {
  color: var(--red);
  opacity: 0;
  transform: translateY(0.16em) scale(0.4);
  transition: opacity .3s var(--spring), transform .6s var(--springy)
}

.hp-num.settled .hp-dot {
  opacity: 1;
  transform: none;
  animation: dotStamp .7s var(--springy) .05s
}

@keyframes dotStamp {
  0% {
    text-shadow: 0 0 0 rgba(206, 27, 40, 0)
  }

  40% {
    text-shadow: 0 0 24px rgba(206, 27, 40, 0.55)
  }

  100% {
    text-shadow: 0 0 0 rgba(206, 27, 40, 0)
  }
}

.hp-stat-t {
  display: block;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--graphite);
  line-height: 1.4
}

.hp-stat-s {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.6
}

@media (max-width:600px) {
  .hp-num {
    font-size: clamp(46px, 13vw, 64px)
  }
}

.hp-mfg-band {
  margin-top: 16px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: center
}

.hp-mfg-band h3 {
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--graphite)
}

.hp-tick-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.hp-tick-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.55
}

.hp-tick {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  margin-top: 1px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair)
}

.hp-tick::after {
  content: "";
  width: 7px;
  height: 4.5px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg) translateY(-1px)
}

.hp-eco-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  perspective: 1400px
}

.hp-eco-card {
  padding: 34px;
  overflow: hidden;
  position: relative;
  isolation: isolate
}

/* Each family leads with its own product shot. The photography is shot on
   white, so it's multiply-blended into the card instead of being cut out —
   the contact shadows survive and nothing has to be masked. A spotlight
   walks the four cards on a timer until the pointer takes over (see
   main.js). */
.hp-eco-shot {
  position: relative;
  height: 186px;
  margin: -34px -34px 20px;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  z-index: 0;
  background: linear-gradient(180deg, #fcfcfd 0%, #f4f6fa 100%);
  box-shadow: inset 0 -1px 0 rgba(28, 28, 40, 0.06)
}

.hp-eco-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 46%;
  mix-blend-mode: multiply;
  transform: scale(1.02) translate3d(var(--sx, 0px), var(--sy, 0px), 0);
  transition: transform .9s var(--spring), filter .6s var(--spring);
  will-change: transform;
  padding: 14px 22px;
}

.hp-eco-card:hover .hp-eco-shot img {
  transform: scale(1.075) translate3d(var(--sx, 0px), var(--sy, 0px), 0)
}

.hp-eco-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 1.1s var(--spring)
}

.hp-eco-card:hover .hp-eco-shot::after,
.hp-eco-card.spot .hp-eco-shot::after {
  transform: translateX(120%)
}

.hp-eco-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s var(--spring);
  z-index: 2
}

[dir="rtl"] .hp-eco-rule {
  transform-origin: right center
}

.hp-eco-card:hover .hp-eco-rule,
.hp-eco-card.spot .hp-eco-rule {
  transform: scaleX(1)
}

.hp-eco-card.spot {
  box-shadow: 0 18px 44px rgba(30, 40, 80, 0.10)
}

@media (max-width:900px) {
  .hp-eco-shot {
    height: 150px
  }
}

@media (prefers-reduced-motion:reduce) {
  .hp-eco-shot::after {
    display: none
  }
}

.hp-eco-card h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 8px
}

.hp-eco-card p {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 400px
}

.hp-eco-obj {
  height: 64px;
  margin-bottom: 18px;
  position: relative;
  display: flex;
  align-items: center
}

.hp-eco-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block
}

.hp-obj {
  position: absolute;
  border-radius: var(--r-md);
  box-shadow: 0 14px 30px rgba(30, 40, 80, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 1px rgba(30, 40, 80, 0.08);
  background: linear-gradient(120deg, rgba(150, 180, 230, 0.16), rgba(255, 255, 255, 0.25) 50%, rgba(120, 150, 210, 0.08))
}

.hp-obj-fiber {
  left: 6%;
  top: 32%;
  width: 60%;
  height: 11px;
  border-radius: var(--r-pill);
  transform: rotate(-6deg)
}

.hp-obj-fiber i {
  position: absolute;
  left: 6%;
  top: calc(50% - 1px);
  width: 88%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(226, 38, 51, 0.85), #FF5A64, rgba(226, 38, 51, 0.85), transparent);
  box-shadow: 0 0 12px rgba(206, 27, 40, 0.4)
}

.hp-obj-lan {
  left: 10%;
  top: 6%;
  width: 56px;
  height: 56px;
  border-radius: 50%
}

.hp-obj-lan i {
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(80% 80% at 40% 30%, #FF6B72, #CE1B28 60%, #8E141D);
  box-shadow: 0 0 16px rgba(206, 27, 40, 0.35)
}

.hp-obj-key {
  left: 10%;
  top: 2%;
  width: 46px;
  height: 52px;
  border-radius: var(--r-sm);
  transform: rotate(-6deg)
}

.hp-obj-key i {
  position: absolute;
  left: 22%;
  bottom: 16%;
  width: 56%;
  height: 26%;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(206, 27, 40, 0.85), rgba(142, 20, 29, 0.9))
}

.hp-obj-rack {
  left: 12%;
  top: 0;
  width: 50px;
  height: 68px;
  border-radius: var(--r-sm)
}

.hp-obj-rack i {
  position: absolute;
  left: 14%;
  width: 72%;
  height: 5px;
  border-radius: 3px;
  background: rgba(28, 28, 40, 0.09)
}

.hp-obj-rack i:nth-child(1) {
  top: 14%
}

.hp-obj-rack i:nth-child(2) {
  top: 36%
}

.hp-obj-rack i:nth-child(3) {
  top: 58%;
  background: linear-gradient(90deg, rgba(206, 27, 40, 0.5), rgba(206, 27, 40, 0.15))
}

.hp-obj-rack i:nth-child(4) {
  top: 80%
}

.hp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.hp-chip {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  text-decoration: none;
  display: inline-block;
  transition: color .2s, box-shadow .2s
}

a.hp-chip:hover {
  color: var(--red);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(206, 27, 40, 0.35)
}

.hp-spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 6px
}

.hp-stage {
  height: 400px;
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1000px;
  cursor: grab;
  touch-action: pan-y
}

.hp-stage:active {
  cursor: grabbing
}

/* Business-pasted custom visual (engineering section custom_html).
   Its #hp3d still gets the drag-rotate + scroll transform from initHpRing(). */
.hp-stage-custom #hp3d img,
.hp-stage-custom #hp3d svg,
.hp-stage-custom #hp3d video {
  max-width: 100%;
  height: auto
}

.hp-3d {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-style: preserve-3d
}

.hp-ring {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.9), inset 0 -3px 6px rgba(30, 40, 80, 0.10), 0 20px 48px rgba(30, 40, 80, 0.10)
}

.hp-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(30, 40, 80, 0.10) 50%, rgba(160, 185, 235, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude
}

.hp-r-jacket {
  width: 280px;
  height: 280px;
  background: radial-gradient(120% 120% at 35% 20%, rgba(150, 180, 230, 0.16), rgba(150, 180, 230, 0.04) 60%)
}

.hp-r-shield {
  width: 206px;
  height: 206px;
  background: radial-gradient(120% 120% at 35% 20%, rgba(200, 210, 230, 0.30), rgba(200, 210, 230, 0.08) 60%)
}

.hp-r-insul {
  width: 140px;
  height: 140px;
  background: radial-gradient(120% 120% at 35% 20%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15) 60%)
}

.hp-r-core {
  width: 78px;
  height: 78px;
  background: radial-gradient(80% 80% at 40% 30%, #FF6B72, #CE1B28 55%, #7E0F18);
  box-shadow: 0 0 36px rgba(206, 27, 40, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.45)
}

.hp-ring-label {
  position: absolute;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap
}

.hp-stage-hint {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(28, 28, 31, 0.30)
}

.hp-spec-rows {
  margin-top: 24px;
  display: flex;
  flex-direction: column
}

.hp-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 2px;
  border-bottom: 1px solid var(--hair)
}

.hp-spec-row:first-child {
  border-top: 1px solid var(--hair)
}

.hp-spec-k {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: 45%;
}

.hp-spec-v {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--graphite);
  width: 50%;
}

/* ---------- Scroll-scrubbed rack build-up ----------
   Four traced states of the same cabinet, cross-dissolved against scroll
   position. Opacity/transform only, so each frame rasterises once and the
   scrub stays on the compositor. Fully reversible on the way back up. */
.rk-stage {
  height: 530px;
  overflow: hidden;
  padding: 14px 16px 48px;
  cursor: default
}

.rk-view {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  bottom: 62px;
  display: grid;
  place-items: center;
  transform: translate3d(0, var(--rk-par, 0px), 0);
  will-change: transform
}

.rk-pad {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 84%;
  height: 82%;
  transform: translate(-50%, -50%);
  background: radial-gradient(58% 54% at 50% 46%, rgba(255, 255, 255, 0.92), rgba(232, 236, 245, 0.46) 56%, rgba(232, 236, 245, 0) 78%);
  pointer-events: none
}

.rk-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(var(--s, 1));
  will-change: opacity, transform;
  pointer-events: none;
  backface-visibility: hidden
}

.rk-frame svg,
.rk-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain
}

.rk-steps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  display: none !important;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.rk-steps span {
  position: relative;
  padding: 0 13px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(28, 28, 31, 0.30);
  transition: color .45s var(--spring)
}

.rk-steps span+span::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 1px;
  height: 9px;
  transform: translateY(-50%);
  background: rgba(28, 28, 40, 0.12)
}

.rk-steps span.on {
  color: var(--red)
}

.rk-rule {
  position: absolute;
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%);
  width: 196px;
  height: 1px;
  background: var(--hair);
  z-index: 2;
  overflow: hidden
}

.rk-rule i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  background: var(--red);
  width: 0
}

.rk-stage .hp-stage-hint {
  bottom: 2px
}

@media (max-width:900px) {
  .rk-stage {
    height: 400px;
    padding-bottom: 44px
  }

  .rk-view {
    bottom: 56px
  }

  .rk-steps span {
    padding: 0 9px;
    letter-spacing: 0.13em
  }
}

/* ---------- Scroll-scrubbed rack build-up: pinned stage ----------
   .rk-track gives the stage extra scroll room to consume while it stays
   pinned (position:sticky) in the viewport; once that room runs out the
   stage scrolls away with the rest of the page again. */
.rk-spot {
  align-items: start
}

.rk-track {
  position: relative;
  height: calc(530px + 118vh)
}

.rk-track .rk-stage {
  position: sticky;
  top: calc(var(--util-h) + 78px)
}

.rk-copy {
  position: sticky;
  top: calc(var(--util-h) + 118px);
  align-self: start
}

@media (max-width:900px) {
  .rk-track {
    height: calc(400px + 130vh)
  }

  /* phones: the cabinet pins in the middle of the screen (its 400px height centred), never higher than under the
     navbar, while the page scrolls through the build-up */
  .rk-track .rk-stage {
    top: calc(var(--util-h) + 66px);
    top: max(calc(var(--util-h) + 66px), calc(50vh - 200px));
    top: max(calc(var(--util-h) + 66px), calc(50dvh - 200px))
  }
}

/* under 700px the stage is 330px tall (see .hp-stage), so centre that instead */
@media (max-width:700px) {
  .rk-track .rk-stage {
    top: max(calc(var(--util-h) + 66px), calc(50vh - 165px));
    top: max(calc(var(--util-h) + 66px), calc(50dvh - 165px))
  }
}

@media (max-width:900px) {

  .rk-copy {
    position: static
  }
}

@media (prefers-reduced-motion:reduce) {
  .rk-track {
    height: auto
  }

  .rk-track .rk-stage {
    position: relative;
    top: auto
  }
}

/* ---------- Industries carousel — arrow-paged horizontal scroll ---------- */
.hp-ind-carousel {
  position: relative
}

.hp-ind-grid {
  display: flex;
  gap: 14px;
  justify-content: safe center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Block padding so the card shadows aren't clipped into a hard line by the
     scroll container's overflow. Reclaimed with negative margin. */
  padding: 16px 2px 34px;
  margin-bottom: -22px;
  outline: none
}

.hp-ind-grid::-webkit-scrollbar {
  display: none
}

/* Edge fades appear only when there's more to scroll that way (toggled in JS) */
.hp-ind-carousel.can-prev .hp-ind-grid {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px)
}

.hp-ind-carousel.can-next .hp-ind-grid {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%)
}

.hp-ind-carousel.can-prev.can-next .hp-ind-grid {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%)
}

.hp-ind-nav {
  position: absolute;
  top: calc(50% - 9px);
  z-index: 3;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  font-size: 20px;
  line-height: 1;
  color: var(--graphite);
  background: var(--glass, rgba(255, 255, 255, 0.82));
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(30, 40, 80, 0.12);
  cursor: pointer;
  transition: opacity .25s var(--spring), background .25s, transform .25s var(--spring)
}

.hp-ind-nav:hover {
  background: #fff;
  color: var(--red)
}

.hp-ind-nav:active {
  transform: translateY(-50%) scale(0.92)
}

.hp-ind-prev {
  left: -6px
}

.hp-ind-next {
  right: -6px
}

.hp-ind-card {
  flex: 0 0 clamp(212px, 22%, 264px);
  padding: 22px 18px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  /* Tighter, softer shadow than the shared .glass one — the big 44px-blur drop
     shadow merges into a continuous band across the row of small cards. */
  box-shadow: 0 6px 18px rgba(28, 28, 40, 0.06), 0 1px 3px rgba(28, 28, 40, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(28, 28, 40, 0.05)
}

.hp-ind-card .hp-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--titanium);
  margin-bottom: auto;
  transition: all .4s var(--spring)
}

/* Optional admin-uploaded icon, pinned to the top of the card */
.hp-ind-ico {
  width: 34px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: auto;
  transition: transform .4s var(--spring)
}

.hp-ind-card:hover .hp-ind-ico {
  transform: translateY(-2px)
}

.hp-ind-card:hover .hp-dot {
  background: var(--red);
  box-shadow: 0 0 12px rgba(206, 27, 40, 0.4)
}

.hp-ind-card h5 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--graphite)
}

.hp-ind-card p {
  font-size: 10px;
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1.4
}

.hp-globe-band {
  padding: 40px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: center;
  overflow: hidden;
  /* This card sits in front of a continuously-animating <canvas> (the
     rotating globe). backdrop-filter forced Chromium to resample the
     blurred backdrop every animation frame while ALSO nested inside the
     dark-mode `.view{filter:invert(1) hue-rotate(180deg)}` — that combo
     stalled/blacked out the whole section in dark mode. The globe doesn't
     need the frosted-glass blur, so it's dropped here instead of on the
     shared .glass rule (which is fine everywhere it isn't paired with a
     live canvas). */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hp-globe {
  position: relative;
  width: min(230px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  /* The canvas (#glCanvas, inset:0 within this box) now paints the whole lit
     sphere itself — atmosphere, body gradient, terminator, specular and rim
     — in colors it already picks correctly for light/dark (see initGlobe()
     in main.js). This background is just a fallback glow behind it. */
  background: radial-gradient(60% 60% at 32% 26%, rgba(140, 170, 225, 0.22), transparent 70%),
    radial-gradient(80% 80% at 70% 80%, rgba(110, 160, 180, 0.14), transparent 70%),
    radial-gradient(100% 100% at 50% 50%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05) 70%);
  box-shadow: inset 0 3px 2px rgba(255, 255, 255, 0.95), inset 0 -20px 44px rgba(30, 40, 80, 0.10), 0 24px 54px rgba(30, 40, 80, 0.12)
}

html.dark .hp-globe {
  background: transparent;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.35)
}

.hp-gpoint {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--red);
  box-shadow: 0 0 10px rgba(206, 27, 40, 0.5)
}

.hp-gpoint::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(206, 27, 40, 0.45);
  animation: hpPulse 2.8s var(--spring) infinite
}

@keyframes hpPulse {
  0% {
    transform: scale(.4);
    opacity: 1
  }

  100% {
    transform: scale(2.1);
    opacity: 0
  }
}

.hp-market-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--hair)
}

.hp-market-row:first-child {
  border-top: 1px solid var(--hair)
}

.hp-market-row b {
  font-size: 13px;
  font-weight: 600;
  color: var(--graphite);
  white-space: nowrap
}

.hp-market-row span {
  font-size: 11px;
  font-weight: 300;
  color: var(--ink-3);
  text-align: right
}

/* ── Interactive presence globe ───────────────────────────────────────────
   Real Natural Earth land, plotted as an equal-area dot lattice and drawn
   through an orthographic projection on canvas. Spins on its own, drags by
   hand, and swings to a market when its row is hovered. The canvas inverts
   with the rest of the view, so night mode needs no separate palette. */
.gl-globe {
  width: min(300px, 100%);
  cursor: grab;
  touch-action: pan-y;
  overflow: visible;
  -webkit-tap-highlight-color: transparent
}

.gl-globe:active {
  cursor: grabbing
}

.gl-globe canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%
}

.gl-tip {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 10px rgba(30, 40, 80, 0.12);
  opacity: 0;
  transition: opacity .35s var(--spring)
}

.gl-tip.on {
  opacity: 1
}

/* Always-on market labels: one small pill per market, held out from its dot
   on the side facing away from the globe's centre so it doesn't sit over
   the sphere, and hidden the moment its dot rotates onto the far side. */
.gl-lbl {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--spring)
}

.gl-lbl.on {
  opacity: 1
}

.gl-lbl i {
  position: absolute;
  top: 50%;
  white-space: nowrap;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 3px 12px rgba(30, 40, 80, 0.13), inset 0 0 0 1px rgba(28, 28, 40, 0.05);
  transition: color .3s var(--spring), background .3s var(--spring)
}

.gl-lbl.gl-lbl-r i {
  left: 0;
  transform: translateY(-50%)
}

.gl-lbl.gl-lbl-l i {
  right: 0;
  transform: translate(-100%, -50%)
}

.gl-lbl.home i {
  color: var(--red)
}

.gl-lbl.hot i {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 6px 16px rgba(206, 27, 40, 0.32)
}

.gl-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px
}

.gl-hint {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(28, 28, 31, 0.30)
}

.gl-row {
  cursor: pointer;
  position: relative;
  transition: background .35s var(--spring), padding .35s var(--spring)
}

.gl-row::after {
  content: "";
  position: absolute;
  inset-inline-start: -10px;
  top: 50%;
  width: 2px;
  height: 0;
  transform: translateY(-50%);
  background: var(--red);
  transition: height .4s var(--spring)
}

.gl-row:hover,
.gl-row:focus-visible {
  background: rgba(28, 28, 40, 0.025);
  padding-inline-start: 10px;
  outline: none
}

.gl-row:hover::after,
.gl-row:focus-visible::after,
.gl-row.on::after {
  height: 62%
}

.gl-row.on {
  background: rgba(28, 28, 40, 0.025);
  padding-inline-start: 10px
}

.gl-row:hover b,
.gl-row:focus-visible b,
.gl-row.on b {
  color: var(--red)
}

@media (max-width:900px) {
  .gl-globe {
    width: min(240px, 100%)
  }
}

.hp-sus-band {
  padding: 36px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center
}

.hp-sus-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.hp-sus-card {
  padding: 20px
}

.hp-sus-card h5 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--graphite);
  margin-bottom: 5px
}

.hp-sus-card p {
  font-size: 10.5px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.5
}

.hp-sus-ico {
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 12px
}

.hp-leaf {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 0;
  background: #5BB75C;
  box-shadow: 0 0 10px rgba(91, 183, 92, 0.4);
  margin-bottom: 12px
}

.hp-dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.hp-dl-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer
}

.hp-dl-type {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.hp-dl-card h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--graphite);
  line-height: 1.35
}

.hp-dl-meta {
  font-size: 10.5px;
  font-weight: 300;
  color: var(--ink-3);
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: space-between
}

.hp-dl-meta span:last-child {
  color: var(--red);
  font-weight: 700
}

.hp-closing {
  text-align: center;
  padding: 70px 30px;
  margin-top: 16px
}

.hp-closing img {
  width: min(180px, 50vw);
  margin: 0 auto 30px;
  display: block;
  opacity: 0.85
}

.hp-closing .lede {
  margin: 16px auto 28px;
  text-align: center;
}

.hp-closing img {
  width: min(180px, 50vw);
  margin: 0 auto 28px;
  display: block;
  opacity: 0.85;
}

.hp-closing .lede {
  margin: 16px auto 28px;
  text-align: center;
}

.hp-closing .h2 {
  text-align: center;
}

@media (max-width:960px) {
  .hp-stats {
    grid-template-columns: 1fr 1fr
  }

  .hp-mfg-band,
  .hp-spotlight,
  .hp-globe-band,
  .hp-sus-band {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .hp-eco-grid {
    grid-template-columns: 1fr
  }

  .hp-ind-card {
    flex-basis: 66%
  }

  .hp-ind-carousel.can-next .hp-ind-grid,
  .hp-ind-carousel.can-prev.can-next .hp-ind-grid {
    -webkit-mask-image: none;
    mask-image: none
  }

  .hp-dl-grid {
    grid-template-columns: 1fr
  }
}

/* ---------- Global product search — command-surface overlay ---------- */
.search-overlay {
  align-items: flex-start;
  padding-top: calc(var(--util-h) + 96px)
}

.search-panel {
  width: min(680px, 100%);
  border-radius: var(--r-xl);
  transform: translateY(-16px) scale(0.97);
  transition: transform .5s var(--spring);
  overflow: hidden
}

.search-overlay.show .search-panel {
  transform: none
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hair);
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow .25s var(--spring);
  border-radius: 20px;
  margin: 11px;
}

.search-field:focus-within {
  box-shadow: inset 0 0 4px 2px rgb(206 27 40 / 19%);

}

.search-field svg {
  width: 19px;
  height: 19px;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 1.8;
  flex: none
}

.search-field input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  color: var(--graphite)
}

.search-field input::placeholder {
  color: var(--ink-4);
  font-weight: 400
}

.search-esc {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--hair);
  flex: none
}

.search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px var(--hair);
  cursor: pointer;
  flex: none;
  transition: all .25s var(--spring)
}

.search-close svg {
  width: 13px;
  height: 13px;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 2
}

.search-close:hover {
  background: rgba(206, 27, 40, 0.1);
  transform: scale(1.06)
}

.search-close:hover svg {
  stroke: var(--red)
}

.search-fams {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 14px 24px 4px
}

.search-fam-chip {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: all .3s var(--spring)
}

.search-fam-chip:hover {
  color: var(--graphite);
  transform: translateY(-1px)
}

.search-fam-chip.on {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 6px 16px rgba(206, 27, 40, 0.26)
}

.search-meta {
  padding: 10px 24px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.search-results {
  max-height: 52vh;
  overflow-y: auto;
  padding: 6px 10px 16px
}

.search-results::-webkit-scrollbar {
  width: 5px
}

.search-results::-webkit-scrollbar-thumb {
  background: var(--lgrey);
  border-radius: var(--r-pill)
}

.search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .25s var(--spring)
}

.search-row.active,
.search-row:hover {
  background: rgba(255, 255, 255, 0.85)
}

.search-row svg {
  width: 38px;
  height: 32px;
  flex: none
}

.search-row-img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex: none;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px var(--hair)
}

.search-row-body {
  flex: 1;
  min-width: 0
}

.search-row-fam {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.search-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--graphite);
  margin-top: 2px
}

.search-row-name b {
  color: var(--red);
  font-weight: 700
}

.search-row-pn {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 2px
}

.search-row-arrow {
  color: var(--red);
  font-size: 13px;
  flex: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: all .3s var(--spring)
}

.search-row.active .search-row-arrow,
.search-row:hover .search-row-arrow {
  opacity: 1;
  transform: none
}

.search-recent {
  padding: 4px 14px 2px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.search-recent-chip {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: all .3s var(--spring)
}

.search-recent-chip:hover {
  color: var(--graphite);
  transform: translateY(-1px)
}

.search-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px
}

.nav-search-kbd {
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 8px;
  font-weight: 700;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--r-sm);
  padding: 1px 3px;
  box-shadow: inset 0 0 0 1px var(--hair);
  opacity: 0;
  transition: opacity .3s
}

.icon-btn:hover .nav-search-kbd {
  opacity: 1
}

/* ---------- Digit-roll counters (Dyson-precision numerics) ---------- */
.digit-roll {
  display: inline-flex;
  overflow: hidden;
  vertical-align: bottom
}

.digit-roll .dgt {
  display: inline-block;
  transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1)
}

.badge-pop {
  animation: badgePop .45s cubic-bezier(0.34, 1.56, 0.64, 1)
}

@keyframes badgePop {
  0% {
    transform: scale(1)
  }

  35% {
    transform: scale(1.45)
  }

  100% {
    transform: scale(1)
  }
}

/* ============================================================
   FINAL PRODUCTION LAYER
   Dyson-bold typography · media frame system · scroll-aware
   reveals · preview refinement · motion polish · premium mobile
   ============================================================ */

/* ---------- Typography: bolder, tighter, more architectural ---------- */
.h1 {
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.01
}

.h2 {
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.06
}

.lede {
  font-size: 14.5px
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--red), rgba(206, 27, 40, 0.18))
}

.sec-head {
  margin: 64px 0 30px
}

.sec-head+.sec-head {
  margin-top: 34px
}

.hp-stat b {
  font-weight: 900
}

.hp-closing {
  padding: 88px 30px
}

.hp-closing .h1 {
  font-weight: 800
}

/* ---------- View entrance: gentle depth-of-field arrival ---------- */
@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.996);
    filter: blur(7px)
  }

  to {
    opacity: 1;
    transform: none;
    filter: none
  }
}

.view {
  animation-duration: .75s
}

.view {
  display: none;
}

.view.on {
  display: block;
}

/* ---------- Reveal: optical arrival (lift + focus), spring timed ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.986);
  filter: blur(8px);
  transition: opacity .9s var(--spring), transform .9s var(--spring), filter .9s var(--spring)
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none
}

/* ---------- Buttons: raking sheen on every primary action ---------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.5) 46%, rgba(255, 255, 255, 0.06) 54%, transparent 72%);
  transform: translateX(-165%);
  transition: transform .85s var(--spring)
}

.btn:hover::before {
  transform: translateX(165%)
}

.btn-red:active {
  box-shadow: 0 6px 14px rgba(206, 27, 40, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28)
}


/* ---------- Media frame — engineered photography slot ---------- */
.media-frame {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-lg);
  isolation: isolate;
  background:
    radial-gradient(120% 145% at 16% -6%, rgba(150, 180, 230, 0.17), transparent 60%),
    radial-gradient(130% 150% at 90% 112%, rgba(110, 160, 180, 0.12), transparent 62%),
    radial-gradient(56% 56% at 80% 16%, rgba(206, 27, 40, 0.05), transparent 70%),
    linear-gradient(160deg, #FFFFFF, #EEF0F4);
  box-shadow: 0 24px 56px rgba(28, 28, 40, 0.10), 0 3px 10px rgba(28, 28, 40, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 1px rgba(28, 28, 40, 0.06)
}

.media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(28, 28, 40, 0.07) 44%, rgba(28, 28, 40, 0.10) 68%, rgba(255, 255, 255, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude
}

.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(116deg, transparent 34%, rgba(255, 255, 255, 0.34) 45%, rgba(255, 255, 255, 0.05) 53%, transparent 62%)
}

.media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transform: translateY(var(--drift, 0)) scale(1.08);
  transition: transform .9s var(--spring)
}

.media-frame:hover img {
  transform: translateY(var(--drift, 0)) scale(1.13)
}

/* photography keeps true color in night mode — no filter needed */
.mf-ph {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 22px;
  transform: translateY(var(--drift, 0))
}

.mf-ph svg {
  width: 28px;
  height: 28px;
  stroke: rgba(28, 28, 40, 0.30);
  fill: none;
  stroke-width: 1.5
}

.mf-ph em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  max-width: 240px;
  line-height: 1.8
}

.media-frame.has-media .mf-ph {
  display: none
}

.mf-cap {
  position: absolute;
  inset-inline-start: 14px;
  bottom: 14px;
  z-index: 5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px var(--hair), 0 8px 20px rgba(28, 28, 40, 0.10);
  transition: transform .45s var(--spring);
  bottom: 80%;
}

.media-frame:hover .mf-cap {
  transform: translateY(-3px)
}

/* Hero flagship frame — the dominant optical object of the hero */
.hero-media {
  position: absolute;
  inset-inline-start: 0;
  top: 4%;
  width: 74%;
  height: 90%;
  z-index: 2;
  border-radius: var(--r-xl)
}

/* ── Hero facility deck ───────────────────────────────────────────────────
   The flagship slot becomes a hand of factory cards. Three live in the DOM
   and recycle as you move, so only the visible photography is ever decoded.
   Flick it, arrow through it, or let it advance itself. */
.hero-deck {
  position: absolute;
  inset-inline-start: 0;
  top: 4%;
  width: 74%;
  height: 90%;
  z-index: 3;
  border-radius: var(--r-xl);
  cursor: grab;
  touch-action: manipulation;   /* the touch handlers in main.js lock a horizontal swipe to the card and leave vertical swipes to the page */
  outline: none;
  -webkit-user-select: none;
  user-select: none
}

/* the browser's own image drag would steal the flick, so the photos opt out */
.hero-deck img {
  -webkit-user-drag: none;
  pointer-events: none
}

.hero-deck:active {
  cursor: grabbing
}

.hd-card {
  position: absolute;
  inset: 0;
  height: auto;
  z-index: calc(10 - var(--d, 0));
  border-radius: var(--r-xl);
  transform: translate3d(calc(var(--d, 0) * 5.5%), calc(var(--d, 0) * -3.4%), 0) scale(calc(1 - var(--d, 0) * 0.055)) rotate(calc(var(--d, 0) * 1.6deg));
  opacity: calc(1 - var(--d, 0) * 0.3);
  transition: transform .72s var(--spring), opacity .72s var(--spring), z-index 0s .36s;
  will-change: transform, opacity
}

.hd-card.hd-snap {
  transition: none !important
}

.hd-card.hd-out {
  opacity: 0;
  transition: transform .55s cubic-bezier(.4, 0, .6, 1), opacity .55s linear
}

.hero-deck:focus-visible {
  box-shadow: 0 0 0 2px var(--red), 0 0 0 7px rgba(206, 27, 40, 0.15)
}

.hero-deck:focus:not(:focus-visible) {
  box-shadow: none
}

.hd-hud {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 33px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  
}

.hd-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--graphite);
  background: rgba(255, 255, 255, 0.88);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 10px rgba(30, 40, 80, 0.14)
}

/* the "Made in Egypt" badge is hidden for now; the location label carries the same pill style */
.hd-badge {
  display: none
}

.hd-where {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--graphite);
  background: rgba(255, 255, 255, 0.88);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 10px rgba(30, 40, 80, 0.14);
  transition: opacity .35s var(--spring), transform .35s var(--spring)
}

.hd-where.out {
  opacity: 0;
  transform: translateY(5px)
}

/* Pagination doubles as the autoplay timer — each dot is a track that
   fills left-to-right while it's current, stays filled once passed. */
.hd-dots {
  position: absolute;
  inset-inline-end: 16px;
  bottom: 18px;
  z-index: 20;
  display: flex;
  gap: 6px;
      left: 37%;
}

.hd-dots i {
  position: relative;
  display: block;
  width: 22px;
  height: 3px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  pointer-events: auto;
  transition: background .4s var(--spring)
}

.hd-dots i:hover {
  background: rgba(255, 255, 255, 0.72)
}

.hd-dots i b {
  position: absolute;
  inset: 0;
  width: 0;
  display: block;
  background: var(--red);
  border-radius: inherit
}

.hd-dots i.done b {
  width: 100%
}

.hd-dots i.on b {
  animation: hdBar 5.4s linear forwards
}

@keyframes hdBar {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

@media (max-width:1000px) {
  .hero-deck {
    position: relative;
    inset: auto;
    width: 100%;
    height: 250px;
    border-radius: var(--r-lg)
  }

  .hd-card {
    border-radius: var(--r-lg)
  }
}

@media (max-width:560px) {
  .hero-deck {
    height: 206px
  }

  .hd-hud {
    inset-inline-end: 16px;
    flex-wrap: wrap;
    row-gap: 4px
  }

  .hd-where {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
}

@media (prefers-reduced-motion:reduce) {
  .hd-dots i.on b {
    animation: none;
    width: 100%
  }
}

/* Facility gallery + product photo strip */
.hp-gallery {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 16px
}

.hp-gallery .media-frame {
  height: 310px
}

.hp-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.hp-photo-strip .media-frame {
  height: 212px
}

/* ============================================================
   INSIDE THE FACILITY — clickable frames + capability overlay
   ============================================================ */
.media-frame.mf-link {
  cursor: pointer
}

.media-frame.mf-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px
}

.mf-jump {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, #E4232F, var(--red) 55%, #A9121C);
  box-shadow: 0 10px 26px rgba(206, 27, 40, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity .42s var(--spring), transform .42s var(--springy)
}

.mf-jump svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .42s var(--spring)
}

.media-frame.mf-link:hover .mf-jump,
.media-frame.mf-link:focus-visible .mf-jump {
  opacity: 1;
  transform: translateY(0) scale(1)
}

.media-frame.mf-link:hover .mf-jump svg {
  transform: translateX(3px)
}

/* ---- Overlay chrome (reuses the site's .overlay / .sheet) ---- */
#facilityOverlay .sheet,
#capOverlay .sheet {
  width: min(1180px, 100%);
  padding: 0;
  position: relative;
  background: #fbfbfc
}

/* Pillar cards become doors to their own capability section */
.pillar-card.pc-link {
  cursor: pointer
}

.pillar-card .pc-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  opacity: 0.62;
  transition: opacity .34s var(--spring), transform .34s var(--spring)
}

.pillar-card .pc-go svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

.pillar-card.pc-link:hover .pc-go {
  opacity: 1;
  transform: translateX(3px)
}

[dir="rtl"] .pillar-card .pc-go svg {
  transform: scaleX(-1)
}

[dir="rtl"] .pillar-card.pc-link:hover .pc-go {
  transform: translateX(-3px)
}

.pillar-card.pc-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px
}

/* Capability overlay footer — prev / dots / next */
.cap-ov-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 30px 28px
}

.cap-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: all .32s var(--spring)
}

.cap-step svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cap-step:hover:not(:disabled) {
  color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(206, 27, 40, 0.3)
}

.cap-step:disabled {
  opacity: 0.32;
  cursor: default
}

[dir="rtl"] .cap-step svg {
  transform: scaleX(-1)
}

.cap-dots {
  display: flex;
  gap: 7px
}

.cap-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--ink-4);
  transition: all .34s var(--spring)
}

.cap-dots i.on {
  background: var(--red);
  width: 20px;
  box-shadow: 0 0 10px rgba(206, 27, 40, 0.4)
}

@media (max-width: 760px) {
  .cap-ov-foot {
    padding: 6px 18px 22px
  }
}

.cap-ov-head {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair);
  background: rgba(252, 252, 253, 0.86);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: var(--r-xl) var(--r-xl) 0 0
}

.cap-ov-kicker {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  padding-left: 4px
}

.cap-tabs {
  display: flex;
  gap: 7px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px
}

.cap-tabs::-webkit-scrollbar {
  display: none
}

.cap-tab {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: color .3s var(--spring), background .3s var(--spring), box-shadow .3s var(--spring)
}

.cap-tab:hover {
  color: var(--graphite)
}

.cap-tab.on {
  color: #fff;
  background: linear-gradient(140deg, #E4232F, var(--red) 55%, #A9121C);
  box-shadow: 0 8px 20px rgba(206, 27, 40, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.3)
}

.cap-ov-body {
  padding: 2px 30px 26px
}

.cap-ov-body .cap-sec {
  display: none;
  margin: 24px 0 0
}

.cap-ov-body .cap-sec.on {
  display: block
}

/* ---- Capability section content ---- */
.cap-top {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 16px 44px;
  align-items: start
}

.cap-idx {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.cap-idx::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  flex: 0 0 auto
}

.cap-h {
  font-size: clamp(21px, 2.5vw, 31px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin-top: 15px
}

.cap-lede {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink-3);
  line-height: 1.8;
  margin-top: 14px;
  max-width: 52ch
}

.cap-facts {
  display: grid;
  gap: 13px;
  padding-top: 6px
}

.cap-fact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start
}

.cap-fact i {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: var(--r-pill);
  background: var(--red);
  box-shadow: 0 0 10px rgba(206, 27, 40, 0.40);
  flex: 0 0 auto
}

.cap-fact span {
  font-size: 11.5px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.65
}

.cap-fact span b {
  font-weight: 600;
  color: var(--graphite);
  font-size: 11.5px
}

.cap-gal {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 186px;
  gap: 14px;
  margin-top: 28px
}

.cap-gal .media-frame {
  height: auto
}

.cap-gal .gi-lead {
  grid-column: span 4;
  grid-row: span 2
}

.cap-gal .gi-tall {
  grid-column: span 2;
  grid-row: span 2
}

.cap-gal .gi-half {
  grid-column: span 3
}

.cap-gal .gi-full {
  grid-column: span 6
}

@media (max-width: 1180px) {
  .cap-top {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .cap-lede {
    max-width: none
  }

  .cap-gal {
    grid-auto-rows: 168px
  }
}

@media (max-width: 760px) {
  .cap-ov-body {
    padding: 2px 18px 22px
  }

  .cap-ov-head {
    padding: 14px
  }

  .cap-ov-kicker {
    display: none
  }

  .cap-gal {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px
  }

  .cap-gal>figure {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: 224px
  }

  .cap-gal .gi-lead {
    height: 264px
  }

  .mf-jump {
    opacity: 1;
    transform: none
  }
}

/* ---------- Product preview: alive stage, no dead boxes ---------- */
.pu-pv-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    radial-gradient(120% 135% at 18% -4%, rgba(150, 180, 230, 0.15), transparent 62%),
    radial-gradient(120% 135% at 86% 112%, rgba(110, 160, 180, 0.11), transparent 64%),
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.72), rgba(238, 239, 244, 0.30) 72%)
}

.pu-pv-stage::after {
  content: "";
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 16px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(30, 40, 80, 0.14), transparent 72%)
}

.pu-pv-stage svg {
  filter: drop-shadow(0 18px 26px rgba(30, 40, 80, 0.16));
  animation: pvFloat 6.5s ease-in-out infinite
}

@keyframes pvFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-7px)
  }
}

.pu-pv-empty {
  padding: 64px 24px;
  display: grid;
  justify-items: center;
  gap: 14px
}

.pu-pv-empty::before {
  content: "";
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: radial-gradient(120% 120% at 35% 25%, rgba(255, 255, 255, 0.95), rgba(238, 239, 244, 0.45));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair), 0 12px 24px rgba(28, 28, 40, 0.08);
  animation: pvBreath 4.2s ease-in-out infinite
}

@keyframes pvBreath {

  0%,
  100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.07)
  }
}

.pd-visual svg {
  animation: pvFloat 7.5s ease-in-out infinite
}

.pd-visual::after {
  content: "";
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 34px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(30, 40, 80, 0.13), transparent 72%)
}

/* ---------- Stat cards: contained red energy on approach ---------- */
.hp-stat {
  position: relative;
  overflow: hidden
}

.hp-stat::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--red), rgba(206, 27, 40, 0.12));
  opacity: 0;
  transform: scaleY(0.35);
  transition: opacity .5s var(--spring), transform .5s var(--spring)
}

.hp-stat:hover::after {
  opacity: 1;
  transform: none
}

/* ---------- Solutions / hub cards inherit the same lift grammar (already .lift) ---------- */
.hp-dl-card:hover .hp-dl-meta span:last-child {
  transform: translateX(3px)
}

.hp-dl-meta span:last-child {
  display: inline-block;
  transition: transform .4s var(--spring)
}

/* ---------- Premium mobile ---------- */
@media (max-width:1180px) {
  .hero-obj {
    display: block;
    height: auto;
    min-height: 0;
    margin-top: 8px
  }

  .hero-obj .slab,
  .hero-obj .h-energy {
    display: none
  }

  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 250px;
    border-radius: var(--r-lg)
  }

  .hero-deck {
    position: relative;
    inset: auto;
    width: 100%;
    height: 250px;
    border-radius: var(--r-lg)
  }
}

@media (max-width:960px) {

  .hp-gallery,
  .hp-photo-strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent)
  }

  .hp-gallery::-webkit-scrollbar,
  .hp-photo-strip::-webkit-scrollbar {
    display: none
  }

  .hp-gallery .media-frame {
    flex: 0 0 80%;
    height: 242px;
    scroll-snap-align: center
  }

  .hp-photo-strip .media-frame {
    flex: 0 0 62%;
    height: 196px;
    scroll-snap-align: center
  }
}

@media (max-width:600px) {
  .hero {
    padding: 32px 22px 28px
  }

  .h1 {
    font-size: clamp(31px, 9.4vw, 44px)
  }

  .hero-media {
    height: 206px
  }

  .sec-head {
    margin: 50px 0 22px
  }

  .hp-stats {
    gap: 12px;
    grid-template-columns:  1fr;
  }

  .hp-stat {
    padding: 24px 22px
  }

  .hp-mfg-band,
  .hp-globe-band,
  .hp-sus-band {
    padding: 28px 24px
  }

  .hp-closing {
    padding: 64px 22px
  }

  .btn {
    padding: 13px 22px
  }
}

/* ---------- Scroll-scrubbed exploded cable — --p drives everything ---------- */
.hp-3d {
  --p: 0;
  --xm: 1
}

.hp-ring {
  transform: translateX(calc(var(--rx, 0px) * var(--p, 0) * var(--xm, 1))) translateZ(calc(var(--rz, 0px) * var(--p, 0)));
  transition: transform .6s var(--spring)
}

.hp-xlabels {
  position: absolute;
  left: 50%;
  top: calc(50% + 158px);
  width: 0
}

.hp-xlabels span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  transform: translateX(calc(var(--lx, 0px) * var(--p, 0) * var(--xm, 1) - 50%));
  opacity: calc(var(--p, 0) * var(--p, 0));
  transition: transform .6s var(--spring), opacity .5s var(--spring)
}

.hp-xlabels span:last-child {
  color: var(--red)
}

@media (max-width:700px) {
  .hp-stage {
    height: 330px
  }

  .hp-r-jacket {
    width: 196px;
    height: 196px
  }

  .hp-r-shield {
    width: 144px;
    height: 144px
  }

  .hp-r-insul {
    width: 98px;
    height: 98px
  }

  .hp-r-core {
    width: 56px;
    height: 56px
  }

  .hp-xlabels {
    top: calc(50% + 118px)
  }

  .hp-xlabels span {
    font-size: 8px;
    letter-spacing: 0.14em
  }
}

/* ---------- Home rhythm: one seam, everywhere — no zero-gap blocks ---------- */
:where(#v-home)>*+* {
  margin-top: 16px
}

/* ---------- Vertical rhythm: guaranteed tail gap on every page ---------- */
.view {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px))
}

@media (max-width:600px) {
  .view {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px))
  }
}

/* ---------- Nav: monochrome focus ring (no red in navigation) ---------- */
.nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(28, 28, 40, 0.16), 0 0 0 1px rgba(28, 28, 40, 0.42)
}

/* Night-mode utility bar is now graphite glass — see the "DARK MODE" section
   at the end of this file. */

/* put at the end of public/css/style.css */
#cta.glass::after {
  background: unset !important;
}

/* ============================================================
   PRODUCT STORIES — the easter egg under Standards & Compliance
   ============================================================ */
.egg-wrap {
  display: flex;
  justify-content: center;
  margin-top: 34px
}

.egg-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(720px, 100%);
  padding: 46px 44px 40px;
  text-align: center;
  border-radius: var(--r-xl);
  background: radial-gradient(120% 150% at 50% -30%, rgba(255, 255, 255, 0.90), rgba(252, 246, 247, 0.60) 46%, rgba(250, 250, 252, 0.42) 100%);
  box-shadow: 0 22px 60px rgba(28, 28, 40, 0.09), 0 2px 10px rgba(28, 28, 40, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(206, 27, 40, 0.10)
}

.egg-panel .egg-aura {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -62%;
  width: 58%;
  aspect-ratio: 1;
  transform: translateX(-50%) scale(0.6);
  opacity: 0;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(206, 27, 40, 0.15), rgba(206, 27, 40, 0.035) 44%, transparent 66%);
  transition: opacity 1.5s var(--spring), transform 1.7s var(--spring)
}

.reveal.in .egg-aura {
  opacity: 1;
  transform: translateX(-50%) scale(1)
}

.egg-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, 0.60) 48%, transparent 60%);
  transform: translateX(-120%)
}

.reveal.in .egg-panel::after {
  animation: eggSweep 1.9s var(--spring) .45s 1 both
}

@keyframes eggSweep {
  to {
    transform: translateX(120%)
  }
}

.egg-spark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 20px;
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, #E4232F, var(--red) 55%, #A9121C);
  box-shadow: 0 12px 30px rgba(206, 27, 40, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  animation: eggFloat 4.6s ease-in-out infinite
}

.egg-spark svg {
  width: 20px;
  height: 20px;
  fill: #fff
}

@keyframes eggFloat {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-5px)
  }
}

.egg-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red)
}

.egg-t {
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 13px
}

.egg-p {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-3);
  margin: 14px auto 0;
  max-width: 46ch
}

.egg-cta {
  margin-top: 26px
}

.egg-hint {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 16px
}

.egg-hint b {
  font-weight: 700;
  color: var(--ink-3)
}

@media (prefers-reduced-motion:reduce) {
  .egg-spark {
    animation: none
  }

  .reveal.in .egg-panel::after {
    animation: none;
    opacity: 0
  }

  .egg-panel .egg-aura,
  .reveal.in .egg-aura {
    transition: none;
    opacity: 1;
    transform: translateX(-50%) scale(1)
  }
}

@media (max-width:620px) {
  .egg-panel {
    padding: 36px 22px 32px
  }

  .egg-p {
    font-size: 12px
  }
}

#storyOverlay .sheet {
  width: min(1120px, 100%);
  padding: 34px 34px 36px
}

.st-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 24px
}

.st-card {
  height: 238px;
  cursor: pointer;
  border: none;
  padding: 0;
  text-align: start;
  display: block;
  width: 100%;
  background: none;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  isolation: isolate
}

.st-card .st-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 14, 20, 0.06) 0%, rgba(12, 14, 20, 0.30) 46%, rgba(12, 14, 20, 0.74) 100%)
}

.st-card .st-inner {
  position: absolute;
  inset-inline: 22px;
  bottom: 20px;
  z-index: 5
}

.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(206, 27, 40, 0.92);
  box-shadow: 0 6px 16px rgba(206, 27, 40, 0.3)
}

.st-badge svg {
  width: 10px;
  height: 10px;
  fill: #fff;
  stroke: none
}

.st-badge.muted {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.st-badge.muted svg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
  stroke-linecap: round
}

.st-card h4 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(10, 12, 18, 0.5)
}

.st-card p {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 5px
}

.st-card .st-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .4s var(--spring), transform .4s var(--springy)
}

.st-card .st-go svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

.st-card:hover .st-go,
.st-card:focus-visible .st-go {
  opacity: 1;
  transform: translateY(0)
}

.st-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px
}

.st-card.locked {
  cursor: default
}

.st-card.locked img {
  filter: grayscale(0.72) contrast(0.94)
}

html.dark .st-card.locked img {
  filter: grayscale(0.72) contrast(0.94) brightness(0.9)
}

.st-card.locked h4,
.st-card.locked p {
  color: rgba(255, 255, 255, 0.66)
}

[dir="rtl"] .st-card .st-go svg,
[dir="rtl"] .st-badge svg {
  transform: scaleX(-1)
}

/* Story player — the embedded experience runs in its own frame, uninverted */
#storyStage {
  position: fixed;
  inset: 0 5vw;                       /* the story fills 90vw, centred */
  box-shadow: 0 0 0 100vmax rgba(8, 9, 12, 0.88);   /* dims the page around it */
  z-index: 620;
  background: #0b0c10;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--spring)
}

#storyStage.show {
  opacity: 1;
  pointer-events: auto
}

#storyFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .7s var(--spring)
}

#storyStage.ready #storyFrame {
  opacity: 1
}

.st-boot {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  pointer-events: none;
  transition: opacity .5s var(--spring)
}

#storyStage.ready .st-boot {
  opacity: 0
}

.st-boot em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55)
}

.st-boot i {
  display: block;
  width: 120px;
  height: 2px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  position: relative;
  overflow: hidden
}

.st-boot i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: stBoot 1.5s var(--spring) infinite
}

@keyframes stBoot {
  0% {
    transform: translateX(-110%)
  }

  100% {
    transform: translateX(310%)
  }
}

.st-exit {
  position: fixed;
  top: 25px;
  inset-inline-end: 84px;
  z-index: 640;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: rgba(18, 20, 26, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--spring), background .3s var(--spring);
  right: 116px;
}

#storyStage.show~.st-exit,
.st-exit.show {
  opacity: 1;
  pointer-events: auto
}

.st-exit:hover {
  background: rgba(206, 27, 40, 0.86)
}

.st-exit svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round
}

@media (max-width:700px) {
  .st-exit {
    top: 12px;
    right: 12px;
    padding: 10px;
    gap: 0
  }

  .st-exit b {
    display: none
  }
}

@media (max-width:900px) {
  .st-grid {
    grid-template-columns: 1fr
  }

  #storyOverlay .sheet {
    padding: 26px 20px 28px
  }
}

/* ---------- Partner access · Log in / Sign up ---------- */
#authOverlay,
#gateOverlay {
  z-index: 520
}

#authOverlay .auth-sheet,
#dlGateOverlay .auth-sheet,
#gateOverlay .auth-sheet {
  width: min(460px, 100%);
  padding: 40px 36px 34px;
  position: relative
}

.auth-badge {
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair)
}

.auth-badge svg {
  width: 22px;
  height: 22px;
  stroke: var(--red);
  fill: none;
  stroke-width: 1.8
}

.auth-badge.ok svg {
  stroke: #256B2E
}

.auth-sheet .eyebrow {
  margin-bottom: 10px
}

.auth-sheet .h3 {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 8px;
  padding-inline-end: 36px
}

.auth-sheet .lede {
  font-size: 12.5px;
  margin-bottom: 24px
}

.auth-choices {
  display: grid;
  gap: 10px
}

.auth-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: none;
  cursor: pointer;
  text-align: start;
  font-family: var(--font);
  color: var(--graphite);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  transition: transform .4s var(--spring), box-shadow .4s var(--spring)
}

.auth-choice:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(206, 27, 40, 0.22), 0 10px 22px rgba(28, 28, 40, 0.08)
}

.auth-choice:active {
  transform: scale(0.98)
}

.auth-choice:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(206, 27, 40, 0.28), 0 0 0 1px rgba(206, 27, 40, 0.5)
}

.auth-choice .ac-ic {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: rgba(206, 27, 40, 0.08)
}

.auth-choice .ac-ic svg {
  width: 17px;
  height: 17px;
  stroke: var(--red);
  fill: none;
  stroke-width: 1.9
}

.auth-choice.primary .ac-ic {
  background: linear-gradient(135deg, #E22633, #B5121F)
}

.auth-choice.primary .ac-ic svg {
  stroke: #fff
}

.auth-choice b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 3px
}

.auth-choice small {
  display: block;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5
}

.auth-choice .ac-go {
  margin-inline-start: auto;
  color: var(--red);
  font-size: 15px
}

[dir="rtl"] .auth-choice .ac-go,
[dir="rtl"] .auth-back .arr {
  transform: scaleX(-1)
}

.auth-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 0;
  margin-bottom: 22px;
  transition: color .3s var(--spring)
}

.auth-back .arr {
  display: inline-block
}

.auth-back:hover {
  color: var(--red)
}

.auth-pw {
  position: relative
}

.auth-pw input {
  padding-inline-end: 70px
}

.auth-pw button {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 8px;
  border-radius: var(--r-sm)
}

.auth-pw button:hover {
  color: var(--red)
}

.auth-sheet .field input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px rgba(206, 27, 40, 0.6)
}

.auth-err {
  min-height: 18px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--red);
  margin: -6px 0 12px
}

.auth-sheet .btn-block {
  width: 100%
}

.auth-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.auth-actions .btn {
  flex: 1 1 150px
}

.auth-foot {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-2);
  text-align: center
}

.auth-foot button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  padding: 0
}

.auth-foot button:hover {
  text-decoration: underline
}

#suForm .field {
  margin-bottom: 14px
}

#suForm .auth-err {
  margin: 0 0 10px
}

#suForm .auth-err:empty {
  min-height: 0;
  margin: 0
}

#suForm .btn-block {
  margin-top: 8px
}

#dlGateForm .field {
  margin-bottom: 14px
}

#dlGateForm .auth-err {
  margin: 0 0 10px
}

#dlGateForm .auth-err:empty {
  min-height: 0;
  margin: 0
}

#dlGateForm .btn-block {
  margin-top: 8px
}

.auth-sheet .lede.su-lede {
  font-size: 11.5px;
  line-height: 1.65;
  margin-bottom: 22px
}

.su-done {
  margin-top: 6px
}

@media (max-width:520px) {

  #authOverlay .auth-sheet,
  #dlGateOverlay .auth-sheet,
  #gateOverlay .auth-sheet {
    padding: 34px 22px 28px
  }
}

/* ============================================================
   DARK MODE — real graphite theme (2027 refresh)
   ------------------------------------------------------------
   Replaces the old CSS-filter invert (filter:invert(1) hue-rotate(180deg))
   with dark mode's own palette: graphite liquid glass, true-colour
   photography, brand red intact. No filter is applied to the page any
   more — every rule below sets real colors for html.dark. Ported from
   the 2027 reference design; light mode above is untouched.
   ============================================================ */
html.dark {
  color-scheme: dark;
  --graphite: #F3F3F5;
  --ink-2: rgba(235, 235, 245, 0.72);
  --ink-3: rgba(235, 235, 245, 0.52);
  --ink-4: rgba(235, 235, 245, 0.32);
  --hair: rgba(255, 255, 255, 0.09);
  --white: #1C1D21;
  --soft: #0F1013;
  --glass-w: #26272C;
  --titanium: #36373D;
  --lgrey: #4B4C53;
  --red-ink: #F4505B;
  --d-card: linear-gradient(180deg, rgba(255, 255, 255, 0.088) 0%, rgba(255, 255, 255, 0.046) 100%);
  --d-ctl: rgba(255, 255, 255, 0.075);
  --d-ctl-h: rgba(255, 255, 255, 0.12);
  --d-ctl-on: rgba(255, 255, 255, 0.16);
  --d-rim: rgba(255, 255, 255, 0.10);
  --d-hl: rgba(255, 255, 255, 0.09);
  --d-field: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.075);
  --d-sheet: linear-gradient(180deg, rgba(44, 45, 51, 0.94), rgba(30, 31, 36, 0.95));
  --d-shadow: 0 20px 50px rgba(0, 0, 0, 0.46), 0 2px 8px rgba(0, 0, 0, 0.30);
  --d-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* theme changes cross-fade instead of snapping */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .45s var(--spring), background .45s var(--spring), color .45s var(--spring),
    border-color .45s var(--spring), box-shadow .45s var(--spring), fill .45s var(--spring), stroke .45s var(--spring) !important
}

/* ---- page, atmosphere, type ---- */
html.dark body {
  background: #111215;
  color: var(--graphite)
}

html.dark .atmosphere {
  background:
    radial-gradient(46% 40% at 6% -2%, rgba(118, 138, 196, 0.15), transparent 70%),
    radial-gradient(42% 36% at 98% 6%, rgba(206, 27, 40, 0.075), transparent 70%),
    radial-gradient(64% 58% at 50% 116%, rgba(82, 122, 152, 0.09), transparent 72%),
    radial-gradient(26% 26% at 78% 58%, rgba(255, 255, 255, 0.018), transparent 70%),
    linear-gradient(180deg, #17181C 0%, #121316 55%, #0F1013 100%)
}

html.dark ::selection {
  background: rgba(244, 80, 91, 0.32)
}

html.dark .eyebrow {
  color: var(--ink-3)
}

html.dark .thin {
  color: var(--ink-3)
}

html.dark .h1,
html.dark .h2,
html.dark .h3 {
  color: var(--graphite)
}

/* ---- liquid glass (grey, never black) ---- */
html.dark .glass {
  background: var(--d-card);
  box-shadow: var(--d-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -1px 0 rgba(0, 0, 0, 0.28)
}

html.dark .glass::before {
  /*   background: linear-gradient(140deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07) 36%, rgba(255, 255, 255, 0.025) 64%, rgba(255, 255, 255, 0.11)); */
  background: transparent;
}

html.dark .glass::after {
  background: linear-gradient(116deg, transparent 36%, rgba(255, 255, 255, 0.045) 46%, rgba(255, 255, 255, 0.012) 54%, transparent 62%)
}

/* floating material: sheets, drawers, dropdown menus */
html.dark .glass.sheet,
html.dark .glass.drawer,
html.dark .glass.compare-drawer,
html.dark .glass.toast,
html.dark .glass.lang-menu,
html.dark .glass.search-panel,
html.dark .glass.pf-suggest,
html.dark .glass.auth-sheet,
html.dark .msheet-panel,
html.dark .glass.ap-menu {
  background: var(--d-sheet);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow: var(--d-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.06)
}

/* html.dark .lang-menu.open {
  background: transparent
} */

html.dark .cursor-glow::after {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.06), transparent 60%)
}

html.dark .lift::before {
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.075) 46%, rgba(255, 255, 255, 0.01) 56%, transparent 72%)
}

html.dark .lift:hover {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(244, 80, 91, 0.10)
}

/* ---- controls: one grey-glass language for every chip, pill and icon button ---- */
html.dark :is(.btn-ghost, .icon-btn, .appearance-group, .chip, .cert-chip, .hp-chip, .std-chip, .opt, .cpq-chip, .cpq-swatch,
  .step-pill, .search-fam-chip, .search-recent-chip, .cap-tab, .cap-step, .sheet-close, .search-esc, .file-pill,
  .auth-choice, .auth-badge, .home-card .hc-ic, .ci-row .ic, .hp-tick, .cart-item, .cmp-item, .qty, .cpq-pn-live,
  .pn-live, .cfg-note, .ai-hint, .msg.bot, .pu-related .rc, .cpq-seg, .pf-view-toggle, .sxe-chip) {
  background: var(--d-ctl);
  box-shadow: inset 0 1px 0 var(--d-hl), inset 0 0 0 1px var(--d-rim)
}

html.dark :is(.btn-ghost, .icon-btn, .chip, .opt, .cpq-chip, .cpq-swatch, .step-pill, .search-fam-chip,
  .search-recent-chip, .cap-tab, .cap-step, .auth-choice, .ai-hint, .sxe-chip):hover {
  background: var(--d-ctl-h)
}

html.dark .appearance-btn {
  color: var(--ink-2)
}

html.dark .appearance-btn:hover {
  color: #fff
}

html.dark .appearance-btn[aria-checked="true"] {
  background: rgba(244, 80, 91, 0.18);
  color: var(--red-ink)
}

html.dark .btn-ghost {
  color: var(--graphite)
}

html.dark .btn-ghost:hover {
  box-shadow: inset 0 1px 0 var(--d-hl), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 26px rgba(0, 0, 0, 0.40)
}

html.dark .btn-dark {
  color: #141418;
  background: linear-gradient(135deg, #F6F6F8, #D9DADF);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.40), inset 0 1px 0 #fff
}

html.dark .btn-red {
  box-shadow: 0 12px 28px rgba(206, 27, 40, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28)
}

html.dark .icon-btn {
  color: var(--ink-2)
}

html.dark .icon-btn:hover {
  color: #fff
}

html.dark :is(.chip.on, .opt.on, .cpq-chip.on, .cpq-seg button.on, .search-fam-chip.on, .cap-tab.on) {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 8px 22px rgba(206, 27, 40, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.26)
}

html.dark .opt.na {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05)
}

html.dark .cpq-swatch.on {
  color: #141418;
  background: linear-gradient(135deg, #F6F6F8, #D9DADF);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4)
}

html.dark .cpq-swatch .dot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22)
}

html.dark .cpq-swatch.on .dot {
  box-shadow: inset 0 0 0 1.5px rgba(20, 20, 24, 0.55)
}

html.dark .step-pill .n {
  background: rgba(255, 255, 255, 0.10);
  color: var(--ink-2)
}

html.dark .step-pill.on {
  background: var(--d-ctl-on);
  box-shadow: inset 0 0 0 1px rgba(244, 80, 91, 0.35), 0 8px 18px rgba(0, 0, 0, 0.35)
}

html.dark .step-pill.done .n {
  background: #F3F3F5;
  color: #141418
}

html.dark .cmp-item button {
  background: #F3F3F5;
  color: #141418
}

html.dark .badge {
  box-shadow: 0 4px 12px rgba(206, 27, 40, 0.45), 0 0 0 2px #1B1C20
}

/* ---- fields ---- */
html.dark :is(.field input, .field textarea, .field select, .pf-search input, .ai-input textarea, .dlc-search input) {
  color: var(--graphite);
  background: var(--d-field);
  box-shadow: inset 0 0 0 1px var(--d-rim)
}

html.dark :is(.field input, .field textarea, .field select, .pf-search input, .ai-input textarea):focus {
  box-shadow: inset 0 0 0 1.5px rgba(244, 80, 91, 0.55)
}

html.dark ::placeholder {
  color: var(--ink-4)
}

html.dark .field select option {
  background: #1C1D21;
  color: #F3F3F5
}

html.dark .qty input {
  color: var(--graphite)
}

html.dark .qty button {
  color: var(--ink-2)
}

/* ---- utility bar + top navigation ---- */
html.dark .utilbar {
  background: linear-gradient(135deg, #A5111D, #6E0B14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 26px rgba(0, 0, 0, 0.38)
}

html.dark .util-contact,
html.dark .util-contact a,
html.dark .util-link {
  color: rgba(255, 255, 255, 0.90)
}

html.dark .util-contact a:hover,
html.dark .util-link:hover {
  color: #fff
}

html.dark .util-sep {
  color: rgba(255, 255, 255, 0.4)
}

html.dark .topnav-inner {
  background: radial-gradient(140% 160% at 50% -30%, rgba(62, 63, 70, .9), rgb(30 31 36 / 95%) 62%);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.07)
}

html.dark .nav-link {
  color: var(--ink-2)
}

html.dark .nav-link::before {
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.10) 42%, rgba(255, 255, 255, 0.01) 54%, transparent 76%)
}

html.dark .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 18px rgba(0, 0, 0, 0.30)
}

html.dark .nav-link.on {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.38)
}

html.dark .nav-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.45)
}

html.dark .nav-main.compact .nav-link {
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 3px 10px rgba(0, 0, 0, 0.25)
}

html.dark .nav-main.compact .nav-link:hover {
  background: rgba(255, 255, 255, 0.12)
}

html.dark .nav-main.compact .nav-link.on {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.38)
}

html.dark .lang-item {
  color: var(--ink-2)
}

html.dark .lang-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff
}

html.dark .lang-item.on {
  color: var(--red-ink)
}

html.dark .nav-search-kbd {
  background: #2A2B30;
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--d-rim)
}

html.dark .ap-opt:hover,
html.dark .ap-opt:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff
}

html.dark .ap-opt[aria-checked="true"] svg {
  color: var(--red-ink)
}

html.dark .ap-check::after {
  border-color: var(--red-ink)
}

/* ---- mobile menu sheet ---- */
html.dark .msheet-scrim {
  background: rgba(0, 0, 0, 0.45)
}

html.dark .msheet-link {
  color: var(--graphite)
}

html.dark .msheet-link .nav-ic {
  color: var(--ink-2)
}

html.dark .msheet-link:hover,
html.dark .msheet-link.on {
  background: rgba(244, 80, 91, 0.14);
  color: var(--red-ink)
}

html.dark .msheet-link.on .nav-ic {
  color: var(--red-ink)
}

html.dark .msheet-rule {
  background: var(--hair)
}

html.dark .msheet-dl-item {
  color: var(--graphite)
}

html.dark .msheet-dl-item:hover {
  background: rgba(255, 255, 255, 0.06)
}

html.dark .dl-item-soon,
html.dark .msheet-dl-item.is-soon {
  opacity: .55
}

/* ---- home ---- */
html.dark .slab {
  background: linear-gradient(120deg, rgba(120, 140, 196, 0.10), rgba(255, 255, 255, 0.04) 45%, rgba(90, 110, 160, 0.05));
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -1px 1px rgba(0, 0, 0, 0.3)
}

html.dark .slab::before {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 48%, rgba(150, 170, 220, 0.18))
}

html.dark .home-card .hc-ic svg {
  stroke: var(--red-ink)
}

html.dark .home-card p,
html.dark .hp-stat-s,
html.dark .hp-ind-card p {
  color: var(--ink-3)
}

html.dark .hp-num {
  color: var(--graphite)
}

html.dark .hp-dot {
  color: var(--red-ink)
}

html.dark .hp-stat::after {
  background: linear-gradient(180deg, var(--red-ink), rgba(244, 80, 91, 0.12))
}

html.dark .hp-tick::after {
  border-color: var(--red-ink)
}

html.dark .hp-ind-card .hp-dot {
  background: rgba(255, 255, 255, 0.18)
}

html.dark .hp-ind-card:hover .hp-dot {
  background: var(--red-ink);
  box-shadow: 0 0 12px rgba(244, 80, 91, 0.5)
}

html.dark .hp-dl-meta span:last-child {
  color: var(--red-ink)
}

html.dark .hp-market-row b {
  color: var(--graphite)
}

html.dark .gl-row:hover,
html.dark .gl-row:focus-visible,
html.dark .gl-row.on {
  background: rgba(255, 255, 255, 0.04)
}

html.dark .gl-row:hover b,
html.dark .gl-row:focus-visible b,
html.dark .gl-row.on b {
  color: var(--red-ink)
}

html.dark .gl-hint,
html.dark .hp-stage-hint {
  color: var(--ink-4)
}

html.dark .hp-ind-nav {
  background: var(--d-ctl);
  border-color: transparent;
  box-shadow: inset 0 1px 0 var(--d-hl), inset 0 0 0 1px var(--d-rim), 0 6px 20px rgba(0, 0, 0, 0.35);
  color: var(--ink-2)
}

html.dark .hp-ind-nav:hover {
  background: var(--d-ctl-h);
  color: var(--red-ink)
}

html.dark .hp-spec-v {
  color: var(--graphite)
}

html.dark .gl-tip {
  color: #fff;
  background: rgba(36, 37, 42, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.10)
}

html.dark .gl-lbl i {
  color: var(--graphite);
  background: rgba(34, 35, 40, 0.90);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.09)
}

html.dark .gl-lbl.home i {
  color: var(--red-ink)
}

html.dark .gl-lbl.hot i {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F)
}

/* eco cards + rack build-up */
html.dark .hp-eco-shot {
  background: radial-gradient(60% 80% at 50% 118%, rgba(0, 0, 0, 0.42), transparent 62%),
    radial-gradient(46% 70% at 50% 46%, rgba(255, 255, 255, 0.075), transparent 70%),
    radial-gradient(90% 110% at 50% -20%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 62%, rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06)
}

html.dark .hp-eco-shot img {
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35))
}

html.dark .hp-eco-shot::after {
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.10) 50%, transparent 62%)
}

html.dark .hp-eco-card.spot {
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.10)
}

html.dark .hp-eco-card:hover .hp-chip {
  box-shadow: inset 0 1px 0 var(--d-hl), inset 0 0 0 1px rgba(244, 80, 91, 0.28)
}

html.dark .hp-eco-rule {
  background: var(--red-ink)
}

html.dark .rk-img {
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.62))
}

html.dark .rk-pad {
  background: radial-gradient(58% 54% at 50% 46%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035) 56%, rgba(255, 255, 255, 0) 78%)
}

html.dark .rk-steps span {
  color: rgba(235, 235, 245, 0.30)
}

html.dark .rk-steps span+span::before {
  background: rgba(255, 255, 255, 0.14)
}

html.dark .rk-steps span.on {
  color: var(--red-ink)
}

html.dark .rk-rule i {
  background: var(--red-ink)
}

/* media frames: the photograph is shown exactly as shot */
html.dark .media-frame {
  background: radial-gradient(120% 145% at 16% -6%, rgba(120, 140, 196, 0.14), transparent 60%),
    radial-gradient(130% 150% at 90% 112%, rgba(82, 122, 152, 0.12), transparent 62%),
    linear-gradient(160deg, #24252A, #17181C);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.50), 0 3px 10px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.08)
}

html.dark .media-frame::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.05) 44%, rgba(255, 255, 255, 0.03) 68%, rgba(255, 255, 255, 0.12))
}

html.dark .media-frame::after {
  background: linear-gradient(116deg, transparent 36%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0.01) 54%, transparent 62%)
}

html.dark .mf-ph svg {
  stroke: rgba(255, 255, 255, 0.30)
}

html.dark .mf-cap,
html.dark .hd-where,
html.dark .hd-badge {
  color: #F4F4F6;
  background: rgba(24, 25, 29, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 8px 22px rgba(0, 0, 0, 0.40);
  bottom: 80%;
}

/* ---- sections, cards, overlays, commerce ---- */
html.dark .sol-card:hover,
html.dark .tile:hover {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(244, 80, 91, 0.14)
}

html.dark .sol-card::before,
html.dark .tile::before {
  background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.01) 55%, transparent 70%)
}

html.dark .sol-card:hover .sc-k,
html.dark .tile:hover .tile-fam {
  color: var(--red-ink)
}

html.dark .sol-card .go span,
html.dark .tile-hint {
  color: var(--red-ink)
}

html.dark .tile-stage,
html.dark .pd-visual,
html.dark .cpq-visual,
html.dark .cfg-preview,
html.dark .pu-pv-stage {
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015) 72%)
}

html.dark .tile-stage::after,
html.dark .pu-pv-stage::after,
html.dark .pd-visual::after {
  background: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 72%)
}

html.dark .tile-stage svg,
html.dark .pd-visual svg,
html.dark .cpq-visual svg,
html.dark .cfg-preview svg,
html.dark .pu-pv-stage svg {
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55))
}

html.dark .overlay {
  background: rgba(8, 9, 12, 0.56);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%)
}

html.dark .sheet-close {
  color: var(--ink-2)
}

html.dark .sheet-close:hover {
  color: #fff
}

html.dark .pd-pn b,
html.dark .cpq-crumb b,
html.dark .cpq-pn-live b,
html.dark .pn-live b,
html.dark .pu-pv-crumb b,
html.dark .search-row-name b,
html.dark .pf-suggest-item b,
html.dark .cpq-progress b,
html.dark .pf-count b {
  color: var(--red-ink)
}

html.dark .var-row:hover,
html.dark .cpq-trow:hover:not(.na) {
  background: rgba(255, 255, 255, 0.045)
}

html.dark .var-row.on,
html.dark .cpq-trow.on {
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 2.5px 0 0 var(--red-ink)
}

html.dark .var-radio,
html.dark .cpq-radio {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.30)
}

html.dark .var-row.on .var-radio,
html.dark .cpq-trow.on .cpq-radio {
  box-shadow: inset 0 0 0 4.5px var(--red-ink)
}

html.dark .cpq-summary {
  background: radial-gradient(150% 120% at 100% 0%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))
}

html.dark .cpq-table th {
  background: rgba(255, 255, 255, 0.04)
}

html.dark .cpq-progress .bar {
  background: rgba(255, 255, 255, 0.08)
}

html.dark .cpq-spec-h .req {
  background: rgba(244, 80, 91, 0.14);
  color: var(--red-ink)
}

html.dark .cpq-validity.ok,
html.dark .validity.ok {
  color: #7FD891
}

html.dark .cpq-validity.no,
html.dark .validity.no,
html.dark .cpq-na-note,
html.dark .cfg-note.warn {
  color: #F4B36A
}

html.dark .cpq-na-note,
html.dark .cfg-note.warn {
  background: rgba(217, 131, 36, 0.12);
  box-shadow: inset 0 0 0 1px rgba(217, 131, 36, 0.30)
}

html.dark .cpq-pn-live.locked {
  box-shadow: inset 0 0 0 1.5px rgba(244, 80, 91, 0.55)
}

html.dark .hub-card .hc-tag {
  color: var(--red-ink);
  background: rgba(244, 80, 91, 0.12);
  box-shadow: inset 0 0 0 1px rgba(244, 80, 91, 0.24)
}

html.dark .partner-card a {
  color: var(--ink-2)
}

html.dark .msg.user {
  background: linear-gradient(135deg, #3B3D45, #2A2C33);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08)
}

html.dark .ai-plink {
  color: var(--red-ink);
  border-bottom-color: rgba(244, 80, 91, 0.5)
}

html.dark .auth-choice .ac-ic {
  background: rgba(244, 80, 91, 0.14)
}

html.dark .auth-choice .ac-ic svg,
html.dark .auth-badge svg,
html.dark .ci-row .ic svg {
  stroke: var(--red-ink)
}

html.dark .auth-choice.primary .ac-ic {
  background: linear-gradient(135deg, #E22633, #B5121F)
}

html.dark .auth-choice.primary .ac-ic svg {
  stroke: #fff
}

html.dark .auth-choice .ac-go,
html.dark .auth-foot button,
html.dark .auth-err {
  color: var(--red-ink)
}

html.dark .map-card {
  background: radial-gradient(120% 120% at 30% 20%, rgba(120, 140, 196, 0.14), rgba(255, 255, 255, 0.02) 70%)
}

/* The Google Maps embed (keyless iframe) has no dark style of its own, so dark mode recolours it:
   invert turns the pale map dark, hue-rotate(180deg) swings the inverted colours back so the water stays
   blue, roads stay neutral and the red pin stays red; brightness/contrast keep it from glaring. */
.map-card iframe {
  transition: filter .45s var(--spring)
}

html.dark .map-card iframe {
  filter: invert(92%) hue-rotate(180deg) brightness(0.9) contrast(0.92)
}

html.dark .pf-group-h span.n,
html.dark .pu-node .pu-cnt {
  background: rgba(255, 255, 255, 0.08)
}

html.dark .pf-opt:hover {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(244, 80, 91, 0.14)
}

html.dark .pf-box {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28)
}

html.dark .pf-suggest-item:hover,
html.dark .search-row.active,
html.dark .search-row:hover {
  background: rgba(255, 255, 255, 0.07)
}

html.dark .pf-view-toggle button {
  color: var(--ink-3)
}

html.dark .pf-view-toggle button.on {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35)
}

html.dark .cmp-switch {
  background: rgba(255, 255, 255, 0.16)
}

html.dark .pu-node:hover {
  background: radial-gradient(140% 220% at 0% 50%, rgba(244, 80, 91, 0.10), rgba(255, 255, 255, 0.03) 60%);
  box-shadow: inset 0 0 0 1px rgba(244, 80, 91, 0.12)
}

html.dark .pu-node.pu-active .pu-lbl,
html.dark .pu-branch-head .k {
  color: var(--red-ink)
}

html.dark .pu-node:hover .pu-cnt,
html.dark .pu-node.pu-active .pu-cnt {
  background: rgba(244, 80, 91, 0.16);
  color: var(--red-ink)
}

html.dark .pu-node .pu-chev {
  box-shadow: inset 0 0 0 1.4px rgba(244, 80, 91, 0.55);
  color: var(--red-ink)
}

html.dark .pu-kids {
  border-inline-start-color: rgba(255, 255, 255, 0.10)
}

html.dark .pu-row .pu-arrow,
html.dark .search-row-arrow {
  color: var(--red-ink)
}

html.dark .cap-ov-head {
  background: rgba(30, 31, 36, 0.86);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%)
}

html.dark .cap-idx::before,
html.dark .cap-fact i {
  background: var(--red-ink)
}

html.dark .cap-dots i.on {
  background: var(--red-ink)
}

html.dark .pillar-card .pc-go,
html.dark .pillar-card .pc-go svg {
  color: var(--red-ink);
  stroke: var(--red-ink)
}

html.dark .about-stat b em {
  color: var(--red-ink)
}

html.dark .egg-panel {
  background: radial-gradient(120% 150% at 50% -30%, rgba(255, 255, 255, 0.09), rgba(244, 80, 91, 0.05) 46%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(244, 80, 91, 0.16)
}

html.dark .egg-panel::after {
  background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, 0.10) 48%, transparent 60%)
}

html.dark .egg-k {
  color: var(--red-ink)
}

html.dark .toast {
  color: var(--graphite)
}

/* Solutions experience chrome */
html.dark .sxe-zone-card,
html.dark .sxe-nav-btn,
html.dark .sxe-nav-tabs {
  background: linear-gradient(180deg, rgba(46, 47, 53, 0.86), rgba(32, 33, 38, 0.84));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.07)
}

html.dark .sxe-nav-btn {
  color: var(--graphite)
}

html.dark .sxe-nav-back .ci {
  background: rgba(255, 255, 255, 0.10)
}

html.dark .sxe-nav-tab {
  color: var(--ink-3)
}

html.dark .sxe-nav-tab[aria-selected="true"] {
  color: #fff
}

html.dark .sxe-zone-card b {
  color: var(--graphite)
}

html.dark .sxe-panel-sheet {
  background: linear-gradient(180deg, #232429, #1B1C20);
  box-shadow: -18px 0 60px rgba(0, 0, 0, 0.55), inset 1px 0 0 rgba(255, 255, 255, 0.06)
}

html.dark .sxe-pd-ref,
html.dark .sxe-zone-card .go {
  color: var(--red-ink)
}

html.dark .sxe-pd-list li::before {
  background: var(--red-ink)
}

html.dark .sxe-panel-close {
  background: rgba(255, 255, 255, 0.08);
  color: var(--graphite)
}

html.dark .sxe-panel-close:hover {
  background: rgba(255, 255, 255, 0.14)
}

html.dark .sxe-frame {
  background: #111216
}

html.dark .sxe-expand {
  color: #F3F3F5;
  background: rgba(40, 41, 46, 0.84);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.10)
}

/* cart / compare / drawers */
html.dark .drawer {
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.55), inset 1px 0 0 rgba(255, 255, 255, 0.08)
}

html.dark .ci-x {
  color: var(--ink-3)
}

html.dark .ci-x:hover {
  color: var(--red-ink)
}

html.dark .var-table td:first-child {
  color: var(--ink-3)
}

/* ============================================================
   DOWNLOAD CENTER — slide-in panel (replaces the old .dl-menu dropdown)
   Ported from the 2027 reference; --hdr-b/--safe-b fall back to 0 since
   this site doesn't set them.
   ============================================================ */
.dlc {
  position: fixed;
  inset: 0;
  z-index: 560;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear .6s
}

.dlc.open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s
}

.dlc-scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 20, 26, 0.22);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  opacity: 0;
  transition: opacity .45s var(--spring)
}

.dlc.open .dlc-scrim {
  opacity: 1
}

html.dark .dlc-scrim {
  background: rgba(0, 0, 0, 0.46)
}

.dlc-panel {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: 12px;
  width: min(460px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(253, 253, 254, 0.93), rgba(246, 246, 249, 0.90));
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  box-shadow: 0 30px 90px rgba(20, 22, 30, 0.24), 0 4px 14px rgba(20, 22, 30, 0.08), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(28, 28, 40, 0.06);
  transform: translateX(calc(100% + 28px));
  transition: transform .62s var(--spring)
}

[dir="rtl"] .dlc-panel {
  right: auto;
  left: 12px;
  transform: translateX(calc(-100% - 28px))
}

.dlc.open .dlc-panel {
  transform: none
}

html.dark .dlc-panel {
  background: linear-gradient(180deg, rgba(44, 45, 51, 0.94), rgba(28, 29, 34, 0.95));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.62), 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 0 0 1px rgba(255, 255, 255, 0.07)
}

.dlc-grab {
  display: none;
  width: 38px;
  height: 5px;
  border-radius: 99px;
  margin: 8px auto 0;
  background: rgba(28, 28, 40, 0.18);
  flex: none
}

html.dark .dlc-grab {
  background: rgba(255, 255, 255, 0.22)
}

.dlc-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 14px;
  flex: none
}

.dlc-hic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, #E4232F, var(--red) 55%, #A9121C);
  box-shadow: 0 10px 24px rgba(206, 27, 40, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.3)
}

.dlc-hic svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

.dlc-head h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15
}

.dlc-head p {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 34ch
}

.dlc-x {
  position: static !important;
  margin-inline-start: auto;
  flex: none
}

.dlc-tools {
  padding: 0 22px 12px;
  display: grid;
  gap: 10px;
  flex: none
}

.dlc-search {
  position: relative;
  display: block
}

.dlc-search svg {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 2;
  pointer-events: none
}

.dlc-search input {
  width: 100%;
  height: 42px;
  border: 0;
  outline: none;
  border-radius: 13px;
  padding: 0 14px;
  padding-inline-start: 40px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--graphite);
  background: rgba(28, 28, 40, 0.05);
  box-shadow: inset 0 0 0 1px rgba(28, 28, 40, 0.04)
}

.dlc-search input:focus {
  box-shadow: inset 0 0 0 1.5px rgba(206, 27, 40, 0.40)
}

.dlc-search input::-webkit-search-cancel-button {
  display: none
}

.dlc-seg {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: 13px;
  background: rgba(28, 28, 40, 0.05)
}

.dlc-seg button {
  position: relative;
  z-index: 1;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .3s
}

.dlc-seg button i {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-4);
  margin-inline-start: 4px;
  font-variant-numeric: tabular-nums
}

.dlc-seg button[aria-selected="true"] {
  color: var(--graphite)
}

.dlc-seg-thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  height: 32px;
  width: calc((100% - 12px) / 4);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(28, 28, 40, 0.12), inset 0 0 0 1px rgba(28, 28, 40, 0.04);
  transform: translateX(calc(var(--seg, 0) * (100% + 2px)));
  transition: transform .45s var(--springy)
}

[dir="rtl"] .dlc-seg-thumb {
  left: auto;
  right: 3px;
  transform: translateX(calc(var(--seg, 0) * (100% + 2px) * -1))
}

html.dark .dlc-seg,
html.dark .dlc-search input {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06)
}

html.dark .dlc-seg-thumb {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14)
}

.dlc-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 14px 10px;
  -webkit-overflow-scrolling: touch
}

.dlc-list::-webkit-scrollbar {
  width: 5px
}

.dlc-list::-webkit-scrollbar-thumb {
  background: var(--lgrey);
  border-radius: 99px
}

.dlc-group {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 6px 0 2px;
  padding: 10px 8px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: linear-gradient(180deg, rgba(248, 248, 250, 0.96) 70%, rgba(248, 248, 250, 0))
}

html.dark .dlc-group {
  background: linear-gradient(180deg, rgba(31, 32, 37, 0.97) 70%, rgba(31, 32, 37, 0))
}

.dlc-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 14px;
  transition: background .25s var(--spring)
}

.dlc-row:hover {
  background: rgba(28, 28, 40, 0.04)
}

html.dark .dlc-row:hover {
  background: rgba(255, 255, 255, 0.05)
}

.dlc-row.flash {
  animation: dlcFlash 1.6s var(--spring)
}

@keyframes dlcFlash {

  0%,
  100% {
    background: transparent
  }

  20% {
    background: rgba(206, 27, 40, 0.10)
  }
}

.dlc-file {
  position: relative;
  width: 40px;
  height: 48px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: end center;
  padding-bottom: 6px;
  background: linear-gradient(160deg, #fff, #EEF0F4);
  box-shadow: inset 0 0 0 1px rgba(28, 28, 40, 0.08), 0 4px 10px rgba(28, 28, 40, 0.06)
}

.dlc-file::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 0 10px 0 6px;
  background: linear-gradient(225deg, rgba(28, 28, 40, 0.10) 50%, transparent 50%)
}

.dlc-file b {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--red)
}

.dlc-file[data-fmt="CSV"] b {
  background: #2E7D4F
}

.dlc-file[data-fmt="TXT"] b {
  background: #5B6270
}

html.dark .dlc-file {
  background: linear-gradient(160deg, #3A3B42, #2A2B31);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 4px 12px rgba(0, 0, 0, 0.35)
}

.dlc-info {
  flex: 1;
  min-width: 0
}

.dlc-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--graphite);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.dlc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3)
}

.dlc-pn {
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--graphite);
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(28, 28, 40, 0.05)
}

html.dark .dlc-pn {
  background: rgba(255, 255, 255, 0.08)
}

.dlc-times {
  font-variant-numeric: tabular-nums
}

.dlc-acts {
  display: flex;
  gap: 4px;
  flex: none
}

.dlc-act {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: rgba(28, 28, 40, 0.045);
  transition: background .25s, color .25s, transform .15s var(--spring)
}

.dlc-act svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.dlc-act:hover {
  color: var(--graphite);
  background: rgba(28, 28, 40, 0.08)
}

.dlc-act:active {
  transform: scale(0.9)
}

.dlc-act.primary {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 6px 14px rgba(206, 27, 40, 0.26)
}

.dlc-act.primary:hover {
  color: #fff;
  background: linear-gradient(135deg, #EA2C3A, #BE1422)
}

.dlc-act.del:hover {
  color: var(--red)
}

html.dark .dlc-act {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ink-2)
}

html.dark .dlc-act:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff
}

html.dark .dlc-act.primary {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F)
}

.dlc-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 46px 22px 30px
}

.dlc-empty .e-ic {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background: rgba(28, 28, 40, 0.045);
  box-shadow: inset 0 0 0 1px rgba(28, 28, 40, 0.05)
}

.dlc-empty .e-ic svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

html.dark .dlc-empty .e-ic {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06)
}

.dlc-empty h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em
}

.dlc-empty p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 32ch
}

.dlc-empty .btn {
  margin-top: 6px
}

.dlc-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 22px calc(14px + var(--safe-b, 0px));
  border-top: 1px solid var(--hair)
}

.dlc-foot span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3)
}

.dlc-clear {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--red-ink, var(--red));
  padding: 6px 2px
}

.dlc-clear:disabled {
  opacity: .35;
  cursor: default
}

.dlc-clear.armed {
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 6px 14px rgba(206, 27, 40, 0.28)
}

.dlc-note {
  margin: 4px 8px 0;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--ink-4)
}

.dlc-avail {
  flex: none;
  padding: 0 22px 14px;
  border-bottom: 1px solid var(--hair)
}

.dlc-avail-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px
}

.dlc-avail-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  overflow-y: auto
}

.dlc-avail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  color: var(--graphite);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: background .25s var(--spring)
}

.dlc-avail-item:hover {
  background: rgba(28, 28, 40, 0.045)
}

html.dark .dlc-avail-item:hover {
  background: rgba(255, 255, 255, 0.06)
}

.dlc-avail-item small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 2px
}

.dlc-avail-item svg {
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  opacity: .55
}

.dlc-avail-item:hover svg {
  opacity: 1
}

.dl-glyph {
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round
}

.dl-glyph .dl-acc {
  stroke: var(--red);
  stroke-width: 1.36
}

html.dark .dl-glyph .dl-acc {
  stroke: var(--red-ink, var(--red))
}

@media (max-width:760px) {

  .dlc-panel,
  [dir="rtl"] .dlc-panel {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(8px + var(--safe-b, 0px));
    width: auto;
    max-height: min(86vh, calc(100vh - var(--hdr-b, 0px) - 10px));
    max-height: min(86dvh, calc(100dvh - var(--hdr-b, 0px) - 10px));
    border-radius: 28px;
    transform: translateY(calc(100% + 40px))
  }

  .dlc.open .dlc-panel {
    transform: none
  }

  .dlc-grab {
    display: block
  }

  .dlc-head {
    padding: 14px 18px 12px
  }

  .dlc-tools {
    padding: 0 18px 10px
  }

  .dlc-list {
    padding: 0 10px 8px
  }

  .dlc-foot {
    padding: 10px 18px 12px
  }

  .dlc-act {
    width: 38px;
    height: 38px
  }
}

/* ============================================================
   SITE FOOTER — a Liquid Glass panel like every other surface on the
   site (brand manual: frosted veil, 20px backdrop blur, polished 1px
   border, soft shadow — see .glass), not a flat solid band. Sits below
   every .view, contained to the same 1520px width, theme-aware via the
   same --graphite/--ink-2/3/--hair tokens as the rest of the page.
   ============================================================ */
.site-footer {
  /*   max-width: 1520px;
 */
  padding: 48px 144px 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.ft-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--hair)
}

.ft-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.ft-brand {
  gap: 14px
}

.ft-brand .logo-img {
  height: 34px;
  width: auto
}

.ft-lede {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 34ch
}

.ft-social {
  display: flex;
  gap: 10px;
  margin-top: 4px
}

.ft-social-ic {
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: rgba(28, 28, 40, 0.05);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair);
  transition: color .3s var(--spring), background .3s var(--spring), transform .2s var(--spring)
}

html.dark .ft-social-ic {
  background: var(--d-ctl);
  box-shadow: inset 0 1px 0 var(--d-hl), inset 0 0 0 1px var(--d-rim)
}

.ft-social-ic svg {
  width: 16px;
  height: 16px;
  fill: currentColor
}

.ft-social-ic:hover {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  transform: translateY(-2px)
}

.ft-h {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px
}

.ft-link {
  display: block;
  width: fit-content;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 7px 0;
  transition: color .25s var(--spring), transform .25s var(--spring)
}

.ft-link:hover {
  color: var(--red);
  transform: translateX(3px)
}

html.dark .ft-link:hover {
  color: var(--red-ink, var(--red))
}

[dir="rtl"] .ft-link:hover {
  transform: translateX(-3px)
}

.ft-link-soon {
  cursor: default;
  color: var(--ink-4)
}

.ft-link-soon:hover {
  color: var(--ink-4);
  transform: none
}

.ft-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 0;
  line-height: 1.5
}

.ft-contact-row svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  stroke: var(--red);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

html.dark .ft-contact-row svg {
  stroke: var(--red-ink, var(--red))
}

a.ft-contact-row:hover {
  color: var(--graphite)
}

.ft-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 0 22px;
  font-size: 11.5px;
  color: var(--ink-3)
}

@media (max-width:1024px) {
  .site-footer {
    padding: 40px 28px 0
  }

  .ft-top {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px
  }

  .ft-brand {
    grid-column: 1 / -1
  }
}

@media (max-width:600px) {
  .site-footer {
    margin: 10px 12px 24px;
    padding: 36px 22px 0
  }

  .ft-top {
    grid-template-columns: 1fr;
    row-gap: 28px
  }

  .ft-bottom {
    justify-content: center;
    text-align: center
  }
}

html.dark .dlc-act.primary {
  color: #fff;
  background: linear-gradient(135deg, #E22633, #B5121F);
  box-shadow: 0 6px 14px rgba(206, 27, 40, 0.36)
}

/* Navbar-search "page content" result: the block we scrolled to pulses so the eye finds it */
@keyframes searchHitPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(206, 27, 40, 0);
  }

  25%,
  65% {
    box-shadow: 0 0 0 6px rgba(206, 27, 40, .35);
  }
}

.search-hit {
  animation: searchHitPulse 3s ease-in-out 1;
  border-radius: 6px;
  outline: 2px solid rgba(206, 27, 40, .55);
  outline-offset: 4px;
}

/* Arabic (RTL): the big stat figures are a flex row of odometer digits + "+" / "#" + the red dot. In RTL that row
   mirrors, so "40+" read "+04" and "3." read ".3". Keep the figure itself left-to-right, but pinned to the
   right edge so it lines up with the (right-aligned) Arabic label under it. */
html[dir="rtl"] .hp-num {
  direction: ltr;
  justify-content: flex-end
}


/* ============================================================
   NAVBAR ACCOUNT — "Hi, <name>" chip + account menu (see renderAcct() in main.js)
   ============================================================ */
.icon-btn.has-name {
  width: auto;
  min-width: 38px;
  padding: 0 14px 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 700
}

.icon-btn.has-name svg {
  flex: none
}

.icon-btn .acct-hi {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis
}

.icon-btn:not(.has-name) .acct-hi {
  display: none
}

@media (max-width: 1100px) {
  .icon-btn.has-name {
    width: 38px;
    padding: 0
  }

  .icon-btn.has-name .acct-hi {
    display: none
  }
}

.acct-menu {
  min-width: 250px;
  padding: 10px
}

.acct-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 10px
}

.acct-head b {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: var(--graphite)
}

.acct-head small {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
  word-break: break-all
}

.acct-av {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 15px
}

.acct-tag {
  margin: 0 6px 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hair);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #256B2E
}

html.dark .acct-tag {
  color: #6FCF7E
}

.acct-out {
  color: var(--red) !important
}

html.dark .acct-out {
  color: var(--red-ink) !important
}

/* the account card used on phones (navbar button hidden there) */
.acct-sheet {
  position: fixed;
  top: 72px;
  left: 16px;
  right: 16px;
  max-width: 360px;
  margin: 0 auto;
  padding: 12px;
  border-radius: var(--r-lg);
  z-index: 420;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: all .35s var(--spring)
}

.acct-sheet.open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  background: #fff
}

html.dark .acct-sheet.open {
  background: rgba(30, 31, 36, .97)
}

.acct-sheet .lang-item {
  padding: 13px 12px
}


/* ============================================================
   PAGE CROSS-FADE
   Real page-to-page navigations dissolve into each other (browser view transitions — Chrome / Edge / Safari 18.2+;
   other browsers simply load normally). The red utility bar and the top nav are named so they stay put instead of
   fading with the content. Off for people who ask for reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .utilbar {
    view-transition-name: site-utilbar
  }

  .topnav {
    view-transition-name: site-topnav
  }

  ::view-transition-group(root),
  ::view-transition-group(site-utilbar),
  ::view-transition-group(site-topnav) {
    animation-duration: .3s
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-timing-function: ease
  }

  /* pages held back for the saved language (browser transition skipped): fade the finished page in */
  html.et-fade-in body {
    animation: etFadeIn .3s ease both
  }

  /* in-page view switches (go()) — search results, "Explore" buttons … */
  .view.view-enter {
    animation: etFadeIn .3s ease both
  }

  @keyframes etFadeIn {
    from {
      opacity: 0
    }
  }
}


/* ============================================================
   NAVBAR LOADING LIGHT — a small red bar runs along the bottom edge of the navbar while html.et-busy (pageBusy in
   main.js). Solid colour, no glow. Reduced motion: a still, dimmer bar instead of a moving one.
   ============================================================ */
.topnav-inner {
  position: relative
}

.nav-pulse-track {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 1px;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease
}

html.et-busy .nav-pulse-track {
  opacity: 1
}

.nav-pulse {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -110px;
  width: 110px;
  border-radius: 2px;
  background: #CE1B28;
  animation: etNavPulse 1.3s ease-in-out infinite
}

html.dark .nav-pulse {
  background: #F4505B
}

@keyframes etNavPulse {
  0% {
    left: -110px
  }

  100% {
    left: 100%
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-pulse {
    animation: none;
    left: 0;
    width: 100%;
    opacity: .5
  }
}


/* ============================================================
   LOADER — the animated Elsewedy logo (public/images/loader.gif, 1.6 s loop).
   html.ldr-on arms it from the first paint / when you leave a page; it fades in only after .25 s (so fast loads
   never flash it), stays at least ~.5 s once visible, then fades out (.ldr-out). pageLoader in main.js drives it.
   Light mode uses loader.gif (white bg); dark mode uses loader-dark.gif (black bg). The still frame is inverted in dark mode.
   ============================================================ */
#ldr {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  align-items: center;
  justify-content: center;
  background: #FCFCFC;
  opacity: 0
}

html.ldr-on #ldr {
  display: flex;
  animation: ldrIn .3s ease .25s forwards
}

html.ldr-on.ldr-out #ldr {
  animation: ldrOut .35s ease forwards
}

/* arrived from a page that was already showing the loader: no fade-in, it is simply still there */
html.ldr-on.ldr-carry #ldr {
  opacity: 1;
  animation: none
}

html.ldr-on.ldr-carry.ldr-out #ldr {
  animation: ldrOut .35s ease forwards
}

@keyframes ldrIn {
  to {
    opacity: 1
  }
}

@keyframes ldrOut {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

#ldr img {
  display: block;
  width: min(560px, 84vw);
  height: auto;
  user-select: none;
  pointer-events: none
}

#ldr .ldr-still {
  display: none
}

html.dark #ldr {
  background: #030303
}

html.dark #ldr .ldr-still {
  filter: invert(1) hue-rotate(180deg) saturate(1.7)
}

/* Dark mode has its own native black-background GIF (public/images/loader-dark.gif) — no inversion needed. */
#ldr .ldr-gif-dark {
  display: none
}

html.dark #ldr .ldr-gif {
  display: none
}

html.dark #ldr .ldr-gif-dark {
  display: block
}

@media (prefers-reduced-motion: reduce) {

  #ldr .ldr-gif,
  html.dark #ldr .ldr-gif-dark {
    display: none
  }

  #ldr .ldr-still,
  html.dark #ldr .ldr-still {
    display: block
  }

  html.ldr-on #ldr {
    animation-duration: .01s
  }

  html.ldr-on.ldr-out #ldr {
    animation-duration: .01s
  }
}


/* Cart, Think with Adam, Knowledge Hub and Download Center are partner-only: <html> carries .not-partner until a
   partner is logged in (server-rendered in layout.blade.php; setPartner() in main.js keeps it in sync). */
html.not-partner .partner-only {
  display: none !important
}

/* ============================================================
   SMALL PHONES (≤ 425px) — the header must always leave room for the menu button
   ============================================================ */
@media (max-width: 425px) {
  .topnav-inner {
    padding: 8px 12px;
    gap: 10px
  }

  .topnav-inner.shrink {
    padding: 6px 10px;
    gap: 8px;
    background: radial-gradient(140% 160% at 50% -20%, rgba(255, 255, 255, 0.84), rgba(250, 250, 252, 1.8) 60%);
  }

  .logo-img {
    height: 30px
  }

  .nav-right {
    gap: 6px
  }

  .nav-right .icon-btn {
    width: 36px;
    height: 36px
  }

  /* search: the input row must fit the panel (the ESC hint is for keyboards, not phones) */
  .search-field {
    padding: 14px 16px;
    gap: 10px;
    margin: 8px
  }

  .search-field input {
    min-width: 0;
    font-size: 16px
  }

  .search-esc {
    display: none
  }

  /* the phone menu's language list: anchored to the whole footer row and opening upward, so it can never run
     off either edge of the screen wherever the wrapped language button lands */
  #menuSheet .msheet-foot {
    position: relative
  }

  #menuSheet .lang-wrap {
    position: static
  }

  #menuSheet .lang-menu {
    left: 6px;
    right: auto;
    top: auto;
    bottom: calc(100% + 6px)
  }

  [dir="rtl"] #menuSheet .lang-menu {
    left: auto;
    right: 6px
  }

  /* touch targets: keep the small controls finger-sized */
  .search-close {
    width: 34px;
    height: 34px
  }

  .appearance-btn {
    min-width: 34px;
    min-height: 34px
  }
}

/* Very small phones (≤ 340px): a logged-in partner has one more header icon (the cart), which pushed the menu button
   off-screen. The cart and the theme switch both live in the phone menu too, so drop the cart from the bar and shrink
   the logo a little more. */
@media (max-width: 340px) {
  .nav-right>.icon-btn.partner-only {
    display: none !important
  }

  .logo-img {
    height: 26px
  }
}

/* "Forgot password?" link under the password field of the login forms */
.auth-forgot {
  margin: -4px 0 12px;
  text-align: end
}

.auth-forgot button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red, #CE1B28);
  cursor: pointer
}

.auth-forgot button:hover {
  text-decoration: underline
}

.forgot-ok {
  margin-top: 6px
}

/* Products page, phones: the Categories list is one folded row (tap to open) instead of a tall block above the grid */
.pu-side-chev {
  display: none
}

@media (max-width: 900px) {
  .pf-side.glass {
    padding: 14px 18px
  }

  .pf-side .pu-side-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
    padding-block: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
  }

  .pf-side .pu-side-toggle::before {
    top: 13px
  }

  .pu-side-chev {
    display: block;
    flex: none;
    transition: transform .3s ease
  }

  .pf-side.pu-side-open .pu-side-chev {
    transform: rotate(180deg)
  }

  .pf-side.pu-side-open .pu-side-body {
    padding-top: 6px
  }

  .pf-side:not(.pu-side-open) .pu-side-body {
    display: none
  }
}

/* ============================================================
   PRODUCT DETAIL POPUP (#pdModalOverlay / #pdModalPanel, markup in layout.blade.php)
   Its colours were written inline for light mode only (a translucent white backdrop, and a glass panel whose dark
   background is see-through), so in dark mode the page showed through a washed-out grey sheet. Phones get a full-width
   bottom sheet with tighter padding.
   ============================================================ */
html.dark #pdModalOverlay {
  background: rgba(4, 6, 10, 0.74) !important
}

html.dark #pdModalPanel {
  background: var(--d-sheet) !important;
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow: var(--d-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.06)
}

html.dark #pdModalClose {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--graphite)
}

@media (max-width: 600px) {
  #pdModalOverlay {
    padding: 0 !important;
    align-items: flex-end !important
  }

  /* iOS Safari counts vh as the tall viewport (behind the toolbars), pushing the top of the sheet — the ✕ and Share —
     off-screen; dvh is the actually visible height. touch-action stops accidental double-tap/pinch page zoom inside
     the popup, which left the page zoomed in with no way back (the image has its own tap-to-zoom). */
  #pdModalOverlay {
    height: 100dvh;
    touch-action: pan-y
  }

  #pdModalPanel {
    max-height: 94vh !important;
    max-height: 94dvh !important;
    padding: 12px 16px 24px !important;
    border-radius: 24px 24px 0 0 !important
  }

  /* the ✕ stays in view while the sheet scrolls, instead of scrolling away with the content */
  #pdModalClose {
    position: sticky !important;
    top: 10px !important;
    right: auto !important;
    display: block;
    margin: 10px 12px -44px auto !important
  }

  #pdModalContent .cpq-config {
    padding: 8px 0 20px
  }

  #pdModalContent {
    padding-top: 54px
  }

  /* room for the ✕ so it never sits on the text */
  #pdModalContent .cpq-sum-inner {
    padding: 4px 0 8px
  }

  #pdModalContent .cpq-title {
    font-size: 22px
  }

  #pdModalContent #pdMainStage {
    height: 260px !important
  }

  #pdModalContent #pdMainImg {
    object-fit: contain !important
  }

  #pdModalContent .pf-shell {
    grid-template-columns: 1fr !important
  }

  /* the loading skeleton */
}

/* ============================================================
   ARROWS — hero deck (home + About), gallery strip on phones, industries on phones
   ============================================================ */
.hd-nav,
.hp-gal-nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--graphite);
  background: var(--glass, rgba(255, 255, 255, 0.86));
  border: 1px solid var(--hair);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(30, 40, 80, 0.16);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .25s, color .25s, transform .25s var(--spring), opacity .25s
}

.hd-nav svg,
.hp-gal-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.hd-nav:hover,
.hp-gal-nav:hover {
  background: #fff;
  color: var(--red)
}

.hd-nav {
  position: absolute;
  top: 50%;
  z-index: 25;
  transform: translateY(-50%)
}

.hd-nav:active {
  transform: translateY(-50%) scale(0.92)
}

.hd-prev { left: 10px }
.hd-next { right: 10px }

html.dark .hd-nav,
html.dark .hp-gal-nav,
html.dark .hp-ind-nav {
  background: rgba(38, 39, 46, 0.82);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--graphite)
}

html.dark .hd-nav:hover,
html.dark .hp-gal-nav:hover,
html.dark .hp-ind-nav:hover {
  background: rgba(58, 59, 68, 0.95);
  color: var(--red)
}

/* gallery: the wrapper only matters where the frames become a swipe strip */
.hp-gal-wrap { position: relative }
.hp-gal-nav { display: none }

@media (max-width: 960px) {
  .hp-gal-nav {
    position: absolute;
    top: calc(50% - 4px);
    z-index: 4;
    transform: translateY(-50%)
  }

  .hp-gal-nav[hidden] { display: none }
  .hp-gal-nav:not([hidden]) { display: grid }
  .hp-gal-nav:active { transform: translateY(-50%) scale(0.92) }
  .hp-gal-prev { inset-inline-start: 6px }
  .hp-gal-next { inset-inline-end: 6px }
  [dir="rtl"] .hp-gal-nav svg { transform: scaleX(-1) }
}

@media (max-width: 600px) {
  .hd-nav { width: 34px; height: 34px }
  .hd-prev { left: 6px }
  .hd-next { right: 6px }

  /* Sustainability points: one column on phones */
  .hp-sus-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
  }
}

/* ============================================================
   INDUSTRIES ARROWS — a pair of round white buttons at the top-right of the section, level with the heading's last
   line (not on top of the cards): previous in dark, next in red.
   ============================================================ */
.hp-ind-carousel .hp-ind-nav {
  top: -46px;
  width: 44px;
  height: 44px;
  transform: none;
  padding: 0 0 2px;
  font-size: 24px;
  color: var(--graphite);
  background: #fff;
  border: 0;
  box-shadow: 0 8px 22px rgba(30, 40, 80, 0.10), 0 1px 3px rgba(30, 40, 80, 0.06)
}

.hp-ind-carousel .hp-ind-prev { left: auto; right: 52px }
.hp-ind-carousel .hp-ind-next { right: 0; color: var(--red) }
[dir="rtl"] .hp-ind-carousel .hp-ind-prev { right: auto; left: 52px }
[dir="rtl"] .hp-ind-carousel .hp-ind-next { right: auto; left: 0 }

.hp-ind-carousel .hp-ind-nav:hover { background: #fff; transform: scale(1.06) }
.hp-ind-carousel .hp-ind-nav:active { transform: scale(0.94) }
.hp-ind-carousel .hp-ind-nav:disabled { cursor: default; pointer-events: none }

html.dark .hp-ind-carousel .hp-ind-nav {
  background: rgba(46, 47, 55, 0.92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35)
}

html.dark .hp-ind-carousel .hp-ind-nav:hover { background: rgba(66, 67, 78, 0.98) }

html.dark .hp-ind-carousel .hp-ind-next,
html.dark .hp-ind-carousel .hp-ind-nav.hp-ind-next:hover { color: var(--red) }

/* ============================================================
   PRODUCT DETAIL POPUP — scrolling
   The popup used to have two scrollers: the popup itself and the left "config" column (max-height ≈ the popup, with
   overscroll-behavior: contain). The right column is taller than the popup, so the popup scrolled — but the wheel
   only reached it while the pointer was over the right column. Over the left column (where the attribute buttons
   are) the config box swallowed the wheel and nothing moved, which read as "stuck at the bottom" and "scrolling
   broke after I picked an attribute". Now the popup is the only scroller and the whole thing scrolls from anywhere.
   ============================================================ */
#pdModalPanel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch
}

#pdModalContent .cpq-config {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto
}

/* lighter to repaint while scrolling and while options change: no nested backdrop blur, no filter on unavailable
   options, and only the properties that actually change are animated */
html.dark #pdModalPanel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none
}

#pdModalContent .cpq-chip {
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease, color .2s ease, opacity .2s ease
}

#pdModalContent .cpq-chip.na {
  filter: none
}

/* ============================================================
   ABOUT "WHAT WE STAND ON" / FACILITY OVERLAYS — navbar on top, and the ✕ visible
   1. These overlays live inside a page view, whose fade-in makes it a stacking context, so the fixed navbar (z 300)
      painted over the overlay (z 400). While any overlay is open the navbar and utility bar now step back.
   2. The ✕ sat under the sticky tab strip (z 8 vs 5) and, being absolutely positioned, scrolled away with the text.
      It is now pinned at the top-right above the strip, and the strip leaves room for it.
   ============================================================ */
html:has(.overlay.show) .topnav,
html:has(.overlay.show) .utilbar {
  z-index: 0
}

#capOverlay .sheet-close,
#facilityOverlay .sheet-close {
  position: sticky;
  top: 12px;
  right: auto;
  z-index: 12;
  margin: 12px 14px -46px auto;
  background: #fff;
  box-shadow: 0 4px 14px rgba(28, 28, 40, 0.14), inset 0 0 0 1px var(--hair)
}

[dir="rtl"] #capOverlay .sheet-close,
[dir="rtl"] #facilityOverlay .sheet-close {
  left: auto;
  margin: 12px auto -46px 14px
}

#capOverlay .cap-ov-head,
#facilityOverlay .cap-ov-head {
  padding-inline-end: 64px
}

html.dark #capOverlay .sheet-close,
html.dark #facilityOverlay .sheet-close {
  background: rgba(58, 59, 68, 0.96);
  color: var(--graphite);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1)
}

/* ============================================================
   BOTTOM PILLS — the compare bar and the toast wait just below the screen edge (translated out of view). On phones
   whose browser floats its URL bar over the page (iOS Safari) they showed through underneath it — the dark pill with
   the red Compare button in the screenshot. Hidden they are now truly hidden (not just moved), and they fade/appear
   with the same slide as before when they are used.
   ============================================================ */
.compare-drawer,
.toast {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: transform .55s var(--springy), opacity .3s ease, visibility 0s linear .55s
}

.compare-drawer.show,
.toast.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: transform .55s var(--springy), opacity .3s ease, visibility 0s
}

/* About "What we stand on" / Inside the Facility overlays in dark mode: the sheet had a hard-coded near-white
   background (#fbfbfc, id-specific) that beat the dark sheet rule, leaving light text on white. */
html.dark #capOverlay .sheet,
html.dark #facilityOverlay .sheet {
  background: var(--d-sheet, #1c1d22)
}

/* iPhone: the capability / facility sheet scrolls itself, so the sticky header inside it and the tab strip need
   explicit touch handling, and 100vh is taller than the visible area under Safari's floating URL bar. */
#capOverlay .sheet, #facilityOverlay .sheet {
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  -webkit-overflow-scrolling: touch
}
#capOverlay .cap-ov-head, #facilityOverlay .cap-ov-head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0)
}
.cap-tabs {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity
}
.cap-tab { scroll-snap-align: center; flex: 0 0 auto }

/* The download-details form opens from inside the product detail popup (#pdModalOverlay, z-index 9999) — it must sit above it. */
#dlGateOverlay { z-index: 10050 }

.hd-where:empty { display: none }

/* About page rhythm: every card row sits 16px under the block above it (and 16px between cards);
   every section heading starts 64px below the previous block. */
#v-about .hp-stats,
#v-about .about-stats,
#v-about .pillar-grid {
  gap: 16px;
  margin-top: 16px
}

#v-about .hp-mfg-band {
  margin-top: 16px
}

#v-about .sec-head {
  margin: 64px 0 28px
}

/* Standards & Compliance chips that carry a downloadable certificate */
a.cert-chip-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s, transform .15s
}

a.cert-chip-dl svg {
  color: var(--red);
  transition: color .2s, transform .2s
}

a.cert-chip-dl:hover,
a.cert-chip-dl:focus-visible {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 20px rgba(206, 27, 40, .28)
}

a.cert-chip-dl:hover svg,
a.cert-chip-dl:focus-visible svg {
  color: #fff;
  transform: translateY(1px)
}

html.dark a.cert-chip-dl:hover,
html.dark a.cert-chip-dl:focus-visible {
  background: var(--red);
  color: #fff
}

/* Download Datasheet button on mobile: visible border + drop shadow */
@media (max-width: 768px) {
  .pd-ds-btn {
    color: var(--red);
    box-shadow: inset 0 0 0 1.5px rgba(28, 28, 40, 0.28), 0 6px 16px rgba(28, 28, 40, 0.16)
  }
  html.dark .pd-ds-btn {
    color: var(--red);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28), 0 8px 18px rgba(0, 0, 0, 0.45)
  }
}

/* Rotate-to-view lock: Solutions scene + Product Stories player, phones held in portrait only */
.rotate-lock { display: none }
@media (orientation: portrait) and (max-width: 560px) {
  .rotate-lock--frame,
  body:has(#storyStage.show) #rotateLock {
    position: fixed;
    inset: 0;
    z-index: 540;                 /* under the nav (560) so the visitor can still leave */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 32px;
    text-align: center;
    color: #fff;
    background: rgba(11, 12, 16, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px)
  }
  body:has(#storyStage.show) #rotateLock { z-index: 630 }   /* above the story, under its Exit button (640) */
  .rotate-lock--frame { position: absolute; z-index: 50; border-radius: inherit }   /* Solutions: only over the interactive frame */
  .rotate-lock svg {
    width: 76px;
    height: 76px;
    fill: none;
    stroke: var(--red);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: rotateHint 2.4s ease-in-out infinite
  }
  .rotate-lock p {
    margin: 0;
    max-width: 260px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5
  }
}
@keyframes rotateHint {
  0%, 25% { transform: rotate(0) }
  60%, 100% { transform: rotate(-90deg) }
}


/* Product Stories popup on phones (iPhone Safari): same recipe as the product popup, which scrolls fine there.
   - the overlay is exactly the VISIBLE height (dvh; plain vh counts the area behind Safari's toolbars) and does not scroll
   - the sheet is the one scroller, with momentum scrolling and vertical-pan touch
   - no backdrop-filter on either (iOS freezes / drops touch scrolling inside blurred, transformed layers) and no transform
   Applies to every touch device, not only screens <= 900px wide: an iPhone held sideways is wider than 900px (Pro Max: 932px),
   so it used to fall through to the desktop rules and the cards below the fold could not be scrolled to. */
@media (max-width: 900px), (pointer: coarse) {
  #storyOverlay {
    height: 100vh;
    height: 100dvh;
    align-items: start;
    padding: 10px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(240, 241, 244, 0.96);
    touch-action: pan-y
  }

  html.dark #storyOverlay {
    background: rgba(12, 13, 17, 0.96)
  }

  #storyOverlay .sheet {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transform: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fbfbfc
  }

  html.dark #storyOverlay .sheet {
    background: var(--d-card, #16181d)
  }

  #storyOverlay .st-card {
    touch-action: pan-y;
    -webkit-backdrop-filter: none;
    backdrop-filter: none
  }
}

/* Product popup: attribute values filter the part-number list */
/* attribute values / part numbers that don't match the chosen filters are hidden (the "N of M match" note says how many remain) */
.cpq-chip.pd-unavail,
[data-pd-pn-row].pd-pn-dim { display: none !important }
#pdModalContent #pdConfigurator[data-pd-filter] .cpq-spec-h .req { display: none }
.pd-filter-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--ink-3)
}
.pd-filter-note button {
  border: none;
  background: transparent;
  color: var(--red);
  font: 700 11px/1 inherit;
  cursor: pointer;
  padding: 4px 2px
}

/* Product popup: "Clear filters" under the configurator bar, and the "Link copied" alert in light + dark mode */
.pd-cfg-clear {
  display: inline-block;
  margin: 2px 0 12px;
  padding: 4px 2px;
  border: none;
  background: transparent;
  color: var(--red);
  font: 700 11px/1 inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer
}

.pd-cfg-clear[hidden] { display: none }

:root {
  --pdc-bg: rgba(255, 255, 255, 0.96);
  --pdc-fg: #1c1c28;
  --pdc-border: rgba(28, 28, 40, 0.10);
  --pdc-shadow: 0 24px 60px rgba(28, 28, 40, 0.22)
}

html.dark {
  --pdc-bg: rgba(28, 30, 37, 0.96);
  --pdc-fg: #f2f2f6;
  --pdc-border: rgba(255, 255, 255, 0.12);
  --pdc-shadow: 0 24px 70px rgba(0, 0, 0, 0.6)
}

/* Hero photo deck (Home + About): keep the desktop card size/aspect ratio on tablet and phone instead of stretching full width.
   The deck sits in the normal flow so the dots + the space below it are part of the layout (nothing overlaps the card). */
@media (max-width:1180px) {
  .hero-obj {
    display: block;
    position: relative;
    height: auto;
    width: 100%;
    max-width: 520px;
    margin: 8px auto 32px
  }

  .hero-deck {
    position: relative;
    inset: auto;
    top: 0;
    margin-inline: auto;
    width: min(385px, 86%);
    height: auto;
    aspect-ratio: 385 / 342;
    border-radius: var(--r-xl)
  }

  .hd-card {
    border-radius: var(--r-xl)
  }

  /* progress dots stay on the card, centred along its bottom edge — same as desktop */
  .hero-obj .hd-dots {
    position: absolute;
    inset-inline: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 18px
  }
}

/* ---------- Toast: big, high-contrast banner near the top so it is not missed ---------- */
.toast,
html.dark .toast {
  top: calc(env(safe-area-inset-top, 0px) + 88px);
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 560px);
  padding: 16px 22px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff !important;
  background: linear-gradient(135deg, #E22633, #B5121F) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .18) inset !important;
  transform: translate(-50%, -24px);
}
.toast.show { transform: translate(-50%, 0); }
.toast .toast-ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: rgba(255, 255, 255, .22);
}
.toast .toast-act {
  flex: none;
  margin-left: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  color: #B5121F;
  background: #fff;
}
.toast .toast-act:hover { background: #ffe9ec; }
@media (max-width: 600px) { .toast { font-size: 14px; padding: 14px 16px; } }

/* ---------- Global Presence popup (About) ---------- */
#gpOverlay .sheet {
  width: min(1180px, 100%);
  padding: 0;
  position: relative;
  background: #fbfbfc
}
#gpOverlay .gp-ov-body { padding: clamp(22px, 3.2vw, 44px) clamp(16px, 3vw, 40px) clamp(20px, 3vw, 36px) }
#gpOverlay .gp-ov-body .sec-head { margin-top: 6px }
#gpOverlay .sheet-close { position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; z-index: 5 }
html.dark #gpOverlay .sheet { background: var(--d-sheet, #1c1d22) }
html.dark #gpOverlay .sheet-close {
  background: rgba(58, 59, 68, 0.96);
  color: var(--graphite);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1)
}
@media (max-width: 700px) { #gpOverlay .gp-ov-body .hp-globe-band { padding: 22px 16px; gap: 24px } }

/* error toasts: charcoal with a red edge, so a failure never looks like a success */
.toast.toast-err,
html.dark .toast.toast-err {
  background: #23252c !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45), inset 0 0 0 1.5px #E22633 !important;
}
.toast.toast-err .toast-ic { background: #E22633; font-weight: 800 }

/* While a product story is running (a full-screen WebGL page), do not paint the website behind it. Under the opaque story
   frame the page was still being drawn and composited every frame (including the dark-mode invert filter on every view),
   which competes with the story for the GPU and showed up as lag. Hidden only while the story is open. */
html.story-open body > :not(#storyStage):not(#storyExit):not(script):not(style) { visibility: hidden !important }

/* Popups: size to the VISIBLE height. Plain 100vh counts the area behind Safari's toolbars, so on a phone the sheet came out
   taller than the screen but not "overflowing", and could not be scrolled to its bottom. */
@supports (height: 100dvh) {
  .sheet { max-height: calc(100dvh - 56px) }
}