/* Camixel foundation.css bundle. Generated by scripts/consolidate_css.py. */

/* ===== Source: style.css ===== */
/* ─────────────────────────────────────────────────
   CAMIXEL TECHNOLOGIES - style.css
───────────────────────────────────────────────── */

/* ── RESET & ROOT ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  background: var(--bg-0);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
  padding-top: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ── DESIGN TOKENS ── */
:root {
  --green: #5CB890;
  --green-dark: #3d8c6a;
  --green-dim: rgba(92, 184, 144, .12);
  --green-glow: rgba(92, 184, 144, .25);
  --bg-0: #050d09;
  /* Elegant Dark Green */
  --bg-1: #06110b;
  --bg-2: #08170f;
  --bg-card: rgba(255, 255, 255, .04);
  --bg-card-h: rgba(92, 184, 144, .06);
  --border: rgba(255, 255, 255, .08);
  --border-green: rgba(92, 184, 144, .3);
  --text-primary: #e8eaed;
  --text-muted: #8a9bb0;
  --text-faint: #4a5568;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --shadow-green: 0 0 40px rgba(92, 184, 144, .15);
  --transition: .25s cubic-bezier(.4, 0, .2, 1);
  --nav-bg: #000000;
  --nav-bg-scrolled: rgba(4, 6, 10, .92);
  --dropdown-bg: #0d1520;
  --footer-bg: #020408;
  color-scheme: dark;

  /* ── Bold gradient system (Stripe-style accent layer) ── */
  --grad-brand: linear-gradient(115deg, #5CB890 0%, #5CB890 45%, #347C5D 100%);
  --grad-brand-vivid: linear-gradient(115deg, #6fe0a8 0%, #70CDA0 45%, #9BE0BC 100%);
  --grad-mesh-glow-1: rgba(92, 184, 144, .35);
  --grad-mesh-glow-2: rgba(77, 159, 214, .30);
  --grad-mesh-glow-3: rgba(139, 111, 216, .28);
  --grad-text: linear-gradient(100deg, #70CDA0 0%, #70CDA0 50%, #A5E5C5 100%);
}

/* ── TEAL & GREEN THEME ── */
.theme-teal-green {
  --green: #5CB890; /* Emerald Text Color */
  --green-dark: #3d8c6a;
  --green-dim: rgba(92, 184, 144, .12);
  --green-glow: rgba(92, 184, 144, .25);
  --bg-0: #020b0d; /* Deep Teal-Black BG */
  --bg-1: #031215;
  --bg-2: #051a1e;
  --bg-card: rgba(45, 212, 191, .04);
  --bg-card-h: rgba(92, 184, 144, .06);
  --text-primary: #5CB890; /* Green primary text */
  --text-muted: #3d8c6a;
  --text-faint: #1a4d3a;
  --border-green: rgba(92, 184, 144, .3);
  --shadow-green: 0 0 40px rgba(92, 184, 144, .15);
  
  /* Animated Dot Background */
  --dot-color: rgba(45, 212, 191, 0.04); /* Even more subtle for elegance */
  --gradient-bg-dots: radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0);
}

body.theme-teal-green {
  background: 
    var(--gradient-bg-dots) fixed,
    radial-gradient(at 18% 99%, #064e3b 0px, transparent 50%),
    radial-gradient(at 97% 8%, #022c22 0px, transparent 50%),
    radial-gradient(at 79% 82%, #134e4a 0px, transparent 50%),
    radial-gradient(at 1% 20%, #0f766e 0px, transparent 50%),
    radial-gradient(at 44% 47%, #042f2e 0px, transparent 50%),
    #020617; /* Deepest Black Base */
  background-attachment: fixed;
  background-size: 40px 40px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  animation: bg-dots-move 120s linear infinite, bg-elegance-flow 45s ease-in-out infinite alternate;
  color: var(--text-primary);
}

@keyframes bg-dots-move {
  from { background-position: 0 0; }
  to { background-position: 800px 800px; }
}

@keyframes bg-elegance-flow {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* For truly elegant flow, we animate the background position of the highlights */
body.theme-teal-green {
   background-position: 0 0, 0% 0%, 100% 100%, 50% 50%, 100% 0%, 0% 100%;
   transition: background-position 45s ease-in-out;
}

.theme-teal-green h1,
.theme-teal-green h2,
.theme-teal-green h3,
.theme-teal-green h4 {
  color: #fff; /* Keep headings white for impact or Green? I'll try Green as requested */
  color: var(--green);
}

.theme-teal-green .text-accent {
  color: #fff; /* Flip accent to white for contrast on Green text */
}



.nav-container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  height: 80px;
  min-height: 80px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo-header {
  height: 48px;
  width: auto;
  object-fit: contain;
}

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

.nav-item {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
  cursor: pointer;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand-vivid);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.nav-link:hover,
a.nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, .06);
}

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

.chevron {
  transition: transform var(--transition);
}

.has-dropdown:hover .chevron {
  transform: rotate(180deg);
}

/* Mega Dropdown */
.mega-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--dropdown-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(92, 184, 144, .1);
}

.has-dropdown:hover .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-dropdown-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all var(--transition);
  text-decoration: none;
}

.dropdown-item:hover {
  background: rgba(92, 184, 144, 0.08);
  border-color: rgba(92, 184, 144, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.dropdown-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--transition), transform var(--transition);
}

.dropdown-logo-img[alt="Sennheiser"] {
  max-width: 75%;
}

/* Increase PTZ logo size in the nav dropdown for visual parity */
.dropdown-logo-img[alt*="PTZ"] {
  max-width: 75%;
  max-height: 96px;
  width: auto;
}

.dropdown-item:hover .dropdown-logo-img {
  opacity: 1;
  transform: scale(1.08);
}

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

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ═════════════════════════════════════
   HERO
═════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 500px;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

.hero-bg-wrapper {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-slide.active {
  opacity: 1;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(4, 6, 10, 0.95) 0%, rgba(4, 6, 10, 0.8) 40%, transparent 90%);
}

.hero-mesh-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .8;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 12% 20%, var(--grad-mesh-glow-1) 0%, transparent 38%),
    radial-gradient(circle at 30% 75%, var(--grad-mesh-glow-2) 0%, transparent 34%),
    radial-gradient(circle at 8% 85%, var(--grad-mesh-glow-3) 0%, transparent 30%);
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(92, 184, 144, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 184, 144, .04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  padding: 0 24px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.hero-content-slide {
  display: none;
}

.hero-content-slide.active {
  display: block;
  animation: fadeInDown 0.8s ease forwards;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(92, 184, 144, .1);
  border: 1px solid transparent;
  background-image: linear-gradient(rgba(8,12,10,.85), rgba(8,12,10,.85)), var(--grad-brand);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 100px;
  padding: 8px 20px;
  margin-bottom: 32px;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--green);
  animation: fadeInDown .8s ease forwards;
}

.pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(92, 184, 144, .6);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(92, 184, 144, 0);
  }
}

.hero-headline {
  display: flex;
  flex-direction: column;
  font-size: clamp(2.1rem, 5.2vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.04;
  margin-bottom: 28px;
}

.hero-line {
  opacity: 0;
  color: #fff;
  animation: heroLineIn .7s ease forwards;
}

.hero-line:nth-child(1) {
  animation-delay: .2s;
}

.hero-line:nth-child(2) {
  animation-delay: .4s;
}

.hero-line:nth-child(3) {
  animation-delay: .6s;
}

.hero-line-accent {
  background: var(--grad-brand-vivid);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroLineIn .7s ease forwards, gradientDrift 8s ease-in-out infinite;
}

@keyframes gradientDrift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes heroLineIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-sub {
  font-size: clamp(0.6rem, 1vw, 0.85rem);
  max-width: 620px;
  margin: 0 0 40px 0;
  color: rgba(232, 234, 237, .7);
  line-height: 1.8;
  opacity: 0;
  animation: heroLineIn .7s .8s ease forwards;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  opacity: 0;
  animation: heroLineIn .7s 1s ease forwards;
}

.hero-actions .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroLineIn .7s 1.1s ease forwards;
}

.stat {
  text-align: center;
}

.stat-num {
  display: block;
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
}

.stat-label {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

.hero-controls {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .3);
  transition: all var(--transition);
}

.slide-dot.active {
  background: var(--green);
  width: 24px;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 24px;
  right: 40px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--text-muted);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--green));
}

/* ═════════════════════════════════════
   PARTNERS MARQUEE
═════════════════════════════════════ */
.partners-bar {
  padding: 0;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.partners-label {
  text-align: center;
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--text-faint);
  padding: 20px 24px 0;
  font-weight: 700;
  text-transform: uppercase;
}

.marquee-wrapper {
  overflow: hidden;
  position: relative;
  padding: 24px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: marquee 28s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.partner-logo {
  flex-shrink: 0;
  opacity: .6;
  transition: opacity var(--transition), filter var(--transition);
  cursor: default;
}

.partner-logo:hover {
  opacity: 1;
  filter: brightness(1.3);
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ═════════════════════════════════════
   SOLUTIONS
═════════════════════════════════════ */
.solutions {
  background: var(--bg-0);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.solution-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
  transition-delay: attr(data-delay ms);
}

.solution-card:hover {
  border-color: var(--border-green);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4), var(--shadow-green);
}

.card-visual {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.solution-card:hover .card-visual img {
  transform: scale(1.06);
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(8, 13, 18, .95) 100%);
}

.card-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.8rem;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Healthcare card special */
.healthcare-card {
  background: #060e18;
}

.healthcare-visual {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.hc-screen {
  width: 180px;
  height: 160px;
  background: #0a1929;
  border: 1px solid rgba(92, 184, 144, .3);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hc-scan {
  flex: 1;
  background: radial-gradient(ellipse at 50% 40%, rgba(92, 184, 144, .15) 0%, transparent 70%);
  border-radius: 4px;
  border: 1px solid rgba(92, 184, 144, .1);
  position: relative;
  overflow: hidden;
}

.hc-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  animation: scan 2s ease-in-out infinite;
}

@keyframes scan {

  0%,
  100% {
    top: 0;
    opacity: 0;
  }

  10%,
  90% {
    opacity: 1;
  }

  50% {
    top: 100%;
  }
}

.hc-data {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hc-bar {
  height: 6px;
  background: rgba(92, 184, 144, .5);
  border-radius: 3px;
}

.card-body {
  padding: 24px;
}

.card-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.card-body h3 {
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.card-body p {
  font-size: .9rem;
  margin-bottom: 16px;
}

.card-brands {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.card-brands span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid var(--border-green);
  border-radius: 100px;
  padding: 4px 12px;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--green);
  transition: gap var(--transition);
}

.card-link:hover {
  gap: 10px;
}

/* ═════════════════════════════════════
   FEATURED SOLUTION
═════════════════════════════════════ */
.featured-solution {
  background: var(--bg-1);
}

.featured-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.featured-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px var(--border);
}

.featured-media img {
  width: 100%;
  height: auto;
  display: block;
}

.featured-media-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(4, 6, 10, .8);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-green);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}

.featured-content h2 {
  margin-bottom: 20px;
}

.featured-content .section-tag {
  margin-bottom: 16px;
}

.featured-content>p {
  margin-bottom: 32px;
}

.setup-components {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.component-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}

.component-item:hover {
  border-color: var(--border-green);
}

.comp-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.component-item strong {
  display: block;
  font-size: .95rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.component-item small {
  font-size: .78rem;
  color: var(--text-muted);
}

/* ═════════════════════════════════════
   ABOUT
═════════════════════════════════════ */
.about {
  background: var(--bg-0);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-numbers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-number-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.about-number-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--border-green), transparent);
}

.about-number-card.accent {
  background: var(--green-dim);
  border-color: var(--border-green);
}

.about-number-card:hover {
  border-color: var(--border-green);
  transform: translateY(-4px);
}

.an-num {
  display: block;
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.about-number-card.accent .an-num {
  color: var(--green);
}

.an-plus {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green);
}

.an-label {
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

.about-content h2 {
  margin-bottom: 20px;
}

.about-content>p {
  margin-bottom: 16px;
}

.about-content>p:last-of-type {
  margin-bottom: 32px;
}

.about-pillars {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}

.pillar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.pillar-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.pillar strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: .95rem;
}

.pillar p {
  font-size: .85rem;
  margin: 0;
}

/* ═════════════════════════════════════
   INDUSTRIES
═════════════════════════════════════ */
.industries {
  background: var(--bg-1);
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.industry-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 36px 24px;
  text-align: center;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.industry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--green-dim) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
}

.industry-card:hover {
  border-color: var(--border-green);
  transform: translateY(-6px);
}

.industry-card:hover::before {
  opacity: 1;
}

.industry-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 20px;
}

.industry-card h3 {
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.industry-card p {
  font-size: .85rem;
}

/* ═════════════════════════════════════
   TESTIMONIALS
═════════════════════════════════════ */
.testimonials {
  background: var(--bg-0);
}

.testimonials-track-wrapper {
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  transition: transform .75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.testimonial-card {
  min-width: 100%;
  padding: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
}

.quote-icon {
  font-size: 6rem;
  line-height: .8;
  color: var(--green);
  opacity: .25;
  font-family: Georgia, serif;
  position: absolute;
  top: 24px;
  left: 40px;
}

.testimonial-card p {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-primary);
  max-width: 700px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  flex-shrink: 0;
}

.testimonial-author strong {
  display: block;
  color: var(--text-primary);
}

.testimonial-author small {
  font-size: .82rem;
  color: var(--text-muted);
}

.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.t-prev,
.t-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.t-prev:hover,
.t-next:hover {
  border-color: var(--border-green);
  color: var(--green);
}

.t-dots {
  display: flex;
  gap: 8px;
}

.t-dot {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: var(--border);
  transition: all var(--transition);
}

.t-dot.active {
  background: var(--green);
  width: 24px;
}

/* ═════════════════════════════════════
   CTA BAND
═════════════════════════════════════ */
.cta-band {
  padding: 50px 0;
  background: linear-gradient(135deg, var(--bg-1) 0%, #061510 50%, var(--bg-1) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(92, 184, 144, .12) 0%, transparent 70%);
  pointer-events: none;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.cta-text h2 {
  margin-bottom: 12px;
}

.cta-text p {
  max-width: 480px;
}

.cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ═════════════════════════════════════
   CONTACT
═════════════════════════════════════ */
.contact {
  background: var(--bg-1);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-info h2 {
  margin-bottom: 20px;
}

.contact-info>p {
  margin-bottom: 36px;
}

.contact-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ci-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-item strong {
  display: block;
  color: var(--text-primary);
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.contact-item a,
.contact-item span {
  font-size: .95rem;
  color: var(--text-muted);
}

.contact-item a:hover {
  color: var(--green);
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--transition);
}

.social-btn:hover {
  border-color: var(--border-green);
  color: var(--green);
  background: var(--green-dim);
}

/* Form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--text-primary);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: .95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}

.form-group select {
  appearance: none;
  cursor: pointer;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(92, 184, 144, .12);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-faint);
}

.form-success {
  background: var(--green-dim);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-sm);
  padding: 24px;
  text-align: center;
}

.success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.form-success p {
  color: var(--text-primary);
}

/* ═════════════════════════════════════
   FOOTER
═════════════════════════════════════ */
.footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
}

.footer-top {
  padding: 80px 0 60px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.site-logo-footer {
  height: 60px;
  /* Slightly larger for the footer block */
  width: auto;
  object-fit: contain;
}

.footer-brand p {
  font-size: .88rem;
  line-height: 1.8;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.footer-col h4 {
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col ul li a {
  font-size: .88rem;
  color: var(--text-muted);
  transition: color var(--transition);
}

.footer-col ul li a:hover {
  color: var(--green);
}

.contact-list {
  gap: 16px !important;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-list li svg {
  flex-shrink: 0;
  margin-top: 4px;
}

.contact-list li a,
.contact-list li span {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.contact-list li a:hover {
  color: var(--green);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom span {
  font-size: .78rem;
  color: var(--text-faint);
}

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
  box-shadow: 0 8px 24px rgba(92, 184, 144, .4);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(92, 184, 144, .5);
}

/* ═════════════════════════════════════
   RESPONSIVE
═════════════════════════════════════ */
@media (max-width: 1024px) {
  .solutions-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  section {
    padding: 72px 0;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 80px;
    z-index: 999;
    width: 100%;
    box-sizing: border-box;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    left: 0;
    right: 0;
    background: var(--nav-bg-scrolled);
    backdrop-filter: blur(20px);
    padding: 24px;
    border-bottom: 1px solid var(--border);
    gap: 4px;
    align-items: stretch;
  }

  .nav-links.open .nav-cta {
    display: flex;
    margin-top: 16px;
  }

  .hero-headline {
    font-size: clamp(2.4rem, 10vw, 4rem);
  }

  .hero-stats {
    gap: 20px;
  }

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

  .featured-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

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

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .cta-inner {
    flex-direction: column;
    text-align: center;
  }

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

  .hero-scroll-hint {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

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

  .testimonial-card {
    padding: 32px 24px;
  }

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


/* ─────────────────────────────────────────────────
   CAMIXEL TECHNOLOGIES - support.css
   Theme: Light / White / Elegant for Support Portal
───────────────────────────────────────────────── */

/* Base & Typography */
.support-portal {
  background-color: transparent;
  color: var(--text-color);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  line-height: 1.6;
}

.support-portal h1,
.support-portal h2,
.support-portal h3,
.support-portal h4 {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.support-portal p {
  color: #aaa;
}

.support-section {
  padding: 80px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 🧭 1. HERO SECTION */
.support-hero {
  background: transparent;
  text-align: center;
  padding: 40px 24px 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.support-hero h1 {
  font-size: 3.5rem;
  margin-bottom: 24px;
  background: linear-gradient(90deg, #ffffff, #5cb890);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Search Bar */
.search-wrapper {
  max-width: 600px;
  margin: 0 auto 40px;
  position: relative;
  border-radius: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  transition: box-shadow 0.3s ease;
}

.search-wrapper:focus-within {
  box-shadow: 0 8px 30px rgba(92, 184, 144, 0.2);
  border-color: #5cb890;
}

.search-wrapper input {
  flex: 1;
  padding: 20px 24px;
  border: none;
  outline: none;
  font-size: 1.1rem;
  background: transparent;
}

.search-wrapper button {
  padding: 0 30px;
  background: #5cb890;
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.search-wrapper button:hover {
  background: #4a9d78;
}

/* Quick Actions */
.quick-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.quick-action-btn {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-green);
  padding: 12px 24px;
  border-radius: 20px;
  color: #ddd;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.quick-action-btn:hover {
  border-color: #5cb890;
  color: #5cb890;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(92, 184, 144, 0.1);
}

/* 🧩 2. PRODUCT-BASED SUPPORT NAVIGATION */
.section-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.section-sub {
  text-align: center;
  color: #aaa;
  margin-bottom: 48px;
  font-size: 1.1rem;
}

.product-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.product-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-green);
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  border-color: #5cb890;
}

.product-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: inline-block;
}

.product-card h3 {
  font-size: 1.1rem;
  color: #222;
  margin: 0;
}

.product-card span {
  display: block;
  font-size: 0.85rem;
  color: #888;
  margin-top: 8px;
}

/* ⚡ 3. QUICK TROUBLESHOOTING */
.trouble-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.trouble-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-green);
  border-radius: 12px;
  padding: 0;
  transition: box-shadow 0.3s;
}

.trouble-item[open] {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  border-color: #d0f0e0;
}

.trouble-item summary {
  padding: 20px 24px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.trouble-item summary::-webkit-details-marker {
  display: none;
}

.trouble-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: #5cb890;
  transition: transform 0.3s;
}

.trouble-item[open] summary::after {
  transform: rotate(45deg);
}

.trouble-item .trouble-content {
  padding: 0 24px 24px;
  color: #aaa;
}

.trouble-item ol {
  padding-left: 20px;
  margin: 10px 0;
}

.trouble-item li {
  margin-bottom: 8px;
}

/* 📥 4. DOWNLOAD CENTER */
.download-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.download-table th,
.download-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.download-table th {
  background: #f9f9f9;
  font-weight: 600;
  color: #fff;
}

.download-table tr:hover td {
  background: #fdfdfd;
}

.btn-download {
  background: #eaf6f0;
  color: #5cb890;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.3s;
}

.btn-download:hover {
  background: #5cb890;
  color: #fff;
}

/* 🛠️ 5. SERVICE & REPAIR SECTION */
.service-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-green);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.service-info {
  flex: 1;
  min-width: 300px;
  padding: 40px;
  background: rgba(92, 184, 144, 0.1);
  color: #fff;
}

.service-info h3 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.service-info p {
  color: #aaa;
  margin-bottom: 24px;
}

.service-info ul {
  list-style: none;
  padding: 0;
}

.service-info li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ddd;
}

.service-info li::before {
  content: '✓';
  color: #5cb890;
}

.service-form {
  flex: 1.5;
  min-width: 300px;
  padding: 40px;
}

.form-group-light {
  margin-bottom: 20px;
}

.form-group-light label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #ddd;
}

.form-control-light {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.3s;
  font-family: inherit;
}

.form-control-light:focus {
  outline: none;
  border-color: #5cb890;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 0 0 3px rgba(92, 184, 144, 0.1);
}

.file-upload {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  padding: 30px;
  text-align: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 0.3s;
}

.file-upload:hover {
  border-color: #5cb890;
}

.btn-submit {
  background: rgba(92, 184, 144, 0.1);
  color: #fff;
  border: none;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s;
}

.btn-submit:hover {
  background: #5cb890;
}

/* 📞 6. CONTACT SUPPORT & 📊 7. WARRANTY */
.dual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.contact-card,
.warranty-card {
  background: rgba(255, 255, 255, 0.02);
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--border-green);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.contact-card h3,
.warranty-card h3 {
  margin-top: 0;
  font-size: 1.4rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.contact-method .icon {
  width: 40px;
  height: 40px;
  background: #f0f8f4;
  color: #5cb890;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.contact-method a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

.contact-method a:hover {
  color: #5cb890;
}

/* Warranty specific */
.warranty-checker {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.warranty-checker input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.warranty-checker button {
  padding: 12px 24px;
  background: rgba(92, 184, 144, 0.1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.warranty-checker button:hover {
  background: #5cb890;
}

/* 🎓 8. LEARNING & RESOURCES */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.resource-card {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-green);
  transition: transform 0.3s;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.resource-thumb {
  height: 160px;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  position: relative;
}

.resource-thumb::after {
  content: '▶';
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.resource-body {
  padding: 20px;
}

.resource-body h4 {
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.resource-body p {
  font-size: 0.9rem;
  color: #aaa;
  margin: 0;
}

/* Responsiveness */
@media(max-width: 768px) {
  .service-flex {
    flex-direction: column;
  }
}

#bg-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
}


/* Animated Support Background */
.support-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

.support-portal {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════
   INDEX-SPECIFIC STYLES
═══════════════════════════ */
    /* ═══════════════════════════
       HERO ENHANCEMENTS
    ═══════════════════════════ */
    .hero-gradient-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, #5CB890, #00c9a7, #5CB890, transparent);
      background-size: 200% 100%;
      animation: shimmerBar 3s linear infinite;
      z-index: 3;
    }

    @keyframes shimmerBar {
      0% {
        background-position: -200% 0;
      }

      100% {
        background-position: 200% 0;
      }
    }

    /* ═══════════════════════════
       TRUST STATEMENT
    ═══════════════════════════ */
    .trust-statement {
      padding: 60px 0 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .trust-statement::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 700px;
      height: 400px;
      background: radial-gradient(ellipse, rgba(92, 184, 144, .055) 0%, transparent 70%);
      pointer-events: none;
    }

    .trust-eyebrow {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .2em;
      color: var(--green);
      text-transform: uppercase;
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }

    .trust-eyebrow::before,
    .trust-eyebrow::after {
      content: '';
      display: block;
      width: 64px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--green));
    }

    .trust-eyebrow::after {
      background: linear-gradient(270deg, transparent, var(--green));
    }

    .trust-headline {
      font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
      font-size: clamp(2.4rem, 5.5vw, 4.4rem);
      font-weight: 900;
      letter-spacing: -.025em;
      line-height: 1.1;
      color: var(--text-primary);
      max-width: 860px;
      margin: 0 auto 40px;
    }

    .trust-headline em {
      font-style: normal;
      color: var(--green);
    }

    .trust-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .trust-divider-line {
      width: 120px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border));
    }

    .trust-divider-line.right {
      background: linear-gradient(270deg, transparent, var(--border));
    }

    .trust-divider-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 14px var(--green);
    }

    /* ═══════════════════════════
       BRANDS MARQUEE
    ═══════════════════════════ */
    .brands-section {
      padding: 70px 0;
      position: relative;
      overflow: hidden;
      width: 100%;
      background: radial-gradient(ellipse at center, rgba(92, 184, 144, .08) 0%, transparent 60%);
      border-top: 1px solid rgba(92, 184, 144, .1);
      border-bottom: 1px solid rgba(92, 184, 144, .1);
    }

    .brands-section::before,
    .brands-section::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 140px;
      z-index: 2;
      pointer-events: none;
    }

    .brands-section::before {
      left: 0;
      background: linear-gradient(90deg, var(--bg-0), transparent);
    }

    .brands-section::after {
      right: 0;
      background: linear-gradient(270deg, var(--bg-0), transparent);
    }

    .brands-section-title {
      text-align: center;
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: .25em;
      color: var(--green);
      text-transform: uppercase;
      margin-bottom: 40px;
      text-shadow: 0 0 20px rgba(92, 184, 144, 0.4);
    }

    .brands-static-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      padding: 8px 0 0;
      width: 100%;
      align-items: stretch;
    }

    .brand-card {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px 28px;
      margin: 0;
      border: 1px solid rgba(255, 255, 255, 0.05);
      background: rgba(255, 255, 255, 0.02);
      border-radius: var(--radius-lg);
      transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      position: relative;
      min-width: 0;
      width: 100%;
      min-height: 140px;
      text-decoration: none;
    }

    .brand-card::before {
      content: '';
      position: absolute;
      inset: 0;
      padding: 1px;
      border-radius: var(--radius-lg);
      background: var(--grad-brand-vivid);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .4s ease;
      pointer-events: none;
    }

    .brand-card:hover {
      border-color: transparent;
      background: rgba(92, 184, 144, .08);
      box-shadow: 0 10px 40px rgba(92, 184, 144, .2);
      transform: translateY(-6px);
    }

    .brand-card:hover::before {
      opacity: 1;
    }

    .brand-card-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .brand-logo-img {
      height: clamp(48px, 5vw, 72px);
      width: auto;
      object-fit: contain;
      opacity: 0.85;
      transition: opacity 0.4s, transform 0.4s, filter 0.4s;
      margin-bottom: 0;
      max-width: 100%;
    }

    /* Ensure Blackmagic and EIZO logos share the same visual size in the brands marquee */
    .brand-logo-img[alt*="Blackmagic"],
    .brand-logo-img[alt*="EIZO"] {
      height: clamp(70px, 7vw, 120px);
    }

    /* Make PTZ logo slightly larger to match visual weight of other logos */
    .brand-logo-img[alt*="PTZ"] {
      height: clamp(90px, 8vw, 140px);
    }

    .brand-card:hover .brand-logo-img {
      opacity: 1;
      transform: scale(1.04);
      filter: drop-shadow(0 0 12px rgba(92, 184, 144, 0.3));
    }

    @media (max-width: 900px) {
      .brands-static-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .brands-section {
        padding: 56px 0;
      }

      .brands-section-title {
        font-size: 1rem;
        margin-bottom: 24px;
      }

      .brands-static-strip {
        grid-template-columns: 1fr;
      }

      .brand-card {
        min-height: 120px;
      }
    }

    .brand-sub {
      font-size: .8rem;
      color: rgba(255, 255, 255, 0.5);
      letter-spacing: .08em;
      text-align: center;
      transition: color .4s;
    }

    .brand-card:hover .brand-sub {
      color: var(--green);
    }

    .brand-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--green);
      opacity: 0;
      transition: opacity .35s;
    }

    .brand-card:hover .brand-dot {
      opacity: 1;
    }

    /* ═══════════════════════════
       ABOUT REDESIGNED
    ═══════════════════════════ */
    .about-redesigned {
      padding: 60px 0;
      position: relative;
    }

    .about-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .about-left .section-tag {
      margin-bottom: 24px;
    }

    .about-left h2 {
      margin-bottom: 28px;
      font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    }

    .about-left>p {
      margin-bottom: 18px;
      font-size: 1.02rem;
      line-height: 1.82;
    }

    .about-highlight {
      color: var(--green);
      font-weight: 600;
    }

    .about-pillars-new {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 32px 0 38px;
    }

    .pillar-new {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 20px;
      transition: all .3s ease;
    }

    .pillar-new:hover {
      border-color: var(--border-green);
      background: var(--bg-card-h);
    }

    .pillar-new-icon {
      font-size: 1.4rem;
      margin-bottom: 10px;
    }

    .pillar-new strong {
      display: block;
      font-size: .88rem;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .pillar-new p {
      font-size: .78rem;
      margin: 0;
    }

    .about-slideshow {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      aspect-ratio: 4/3;
    }

    .about-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1s ease;
    }

    .about-slide.active {
      opacity: 1;
    }

    .about-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .about-slide-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(5, 13, 8, .85), transparent 55%);
    }

    .about-slide-caption {
      position: absolute;
      bottom: 24px;
      left: 24px;
      right: 24px;
    }

    .about-slide-caption strong {
      display: block;
      font-size: .9rem;
      color: #fff;
      margin-bottom: 3px;
    }

    .about-slide-caption span {
      font-size: .75rem;
      color: var(--green);
    }

    .about-slide-nav {
      position: absolute;
      bottom: -22px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 2;
    }

    .about-slide-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border);
      cursor: pointer;
      transition: all .3s;
      border: none;
    }

    .about-slide-dot.active {
      background: var(--green);
      width: 24px;
      border-radius: 4px;
    }

    .about-nums {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 48px;
    }

    .about-num-item {
      text-align: center;
      padding: 22px 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      transition: border-color .3s;
    }

    .about-num-item:hover {
      border-color: var(--border-green);
    }

    .big-num {
      font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--green);
      line-height: 1;
    }

    .num-label {
      font-size: .72rem;
      color: var(--text-muted);
      margin-top: 5px;
      letter-spacing: .05em;
    }

    /* ═══════════════════════════
       INDUSTRIES REDESIGNED
    ═══════════════════════════ */
    .industries-redesigned {
      padding: 60px 0;
      background: var(--bg-1);
      position: relative;
    }

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

    .industry-tile {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 0;
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .industry-tile::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--green), #00c9a7);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s ease;
      z-index: 5;
    }

    .industry-tile:hover {
      border-color: var(--border-green);
      background: var(--bg-card-h);
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, .3), 0 0 30px rgba(92, 184, 144, .08);
    }

    .industry-tile:hover::after {
      transform: scaleX(1);
    }

    .industry-tile-img {
      height: 160px;
      width: 100%;
      background-size: cover;
      background-position: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .industry-tile:hover .industry-tile-img {
      transform: scale(1.06);
    }

    .industry-tile-content {
      padding: 24px 22px 30px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      background: var(--bg-card);
      position: relative;
      z-index: 2;
    }

    .industry-tile h3 {
      font-size: .98rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .industry-tile p {
      font-size: .78rem;
      line-height: 1.6;
    }

    .industry-tile-badge {
      display: inline-block;
      font-size: .63rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--green);
      border: 1px solid var(--border-green);
      border-radius: 100px;
      padding: 3px 10px;
      margin-top: 14px;
    }

    /* ═══════════════════════════
       CUSTOMER STORIES
    ═══════════════════════════ */
    .customer-stories {
      padding: 60px 0;
      position: relative;
      overflow: hidden;
    }

    .customer-stories::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -200px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(92, 184, 144, .04), transparent 70%);
      transform: translateY(-50%);
    }

    .stories-carousel {
      position: relative;
      overflow: hidden;
      margin-top: 64px;
    }

    .stories-track {
      display: flex;
      transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    }

    .story-card {
      min-width: 100%;
      padding: 0 8%;
    }

    .story-inner {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 56px;
      display: grid;
      grid-template-columns: 1fr 220px;
      gap: 56px;
      align-items: start;
      position: relative;
      overflow: hidden;
    }

    .story-inner::before {
      content: '\201C';
      position: absolute;
      top: -24px;
      left: 40px;
      font-size: 200px;
      font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
      font-weight: 900;
      color: rgba(92, 184, 144, .055);
      line-height: 1;
      pointer-events: none;
    }

    .story-result {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(92, 184, 144, .1);
      border: 1px solid var(--border-green);
      border-radius: 100px;
      padding: 8px 20px;
      font-size: .78rem;
      font-weight: 600;
      color: var(--green);
      margin-bottom: 28px;
    }

    .story-result-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
    }

    .story-quote {
      font-size: 1.08rem;
      color: var(--text-primary);
      line-height: 1.78;
      font-weight: 400;
      margin-bottom: 32px;
      font-style: italic;
    }

    .story-author {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .story-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: .92rem;
      flex-shrink: 0;
      border: 2px solid var(--border-green);
    }

    .story-author-info strong {
      display: block;
      font-size: .92rem;
      color: var(--text-primary);
    }

    .story-author-info small {
      font-size: .75rem;
      color: var(--text-muted);
    }

    .story-visual-box {
      aspect-ratio: 1;
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--bg-2);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .story-visual-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .story-brand-tag {
      text-align: center;
      margin-top: 10px;
      font-size: .68rem;
      color: var(--text-faint);
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    .stories-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 48px;
    }

    .story-nav-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      cursor: pointer;
      transition: all .25s ease;
    }

    .story-nav-btn:hover {
      border-color: var(--green);
      color: var(--green);
      background: var(--green-dim);
    }

    .story-dots {
      display: flex;
      gap: 8px;
    }

    .story-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border);
      border: none;
      cursor: pointer;
      transition: all .3s;
    }

    .story-dot.active {
      background: var(--green);
      width: 24px;
      border-radius: 4px;
    }

    /* ═══════════════════════════
       CONTACT REDESIGNED
    ═══════════════════════════ */
    .contact-redesigned {
      padding: 60px 0;
      position: relative;
      background: var(--bg-1);
    }

    .contact-redesigned::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 40% at 18% 50%, rgba(92, 184, 144, .04), transparent),
        radial-gradient(ellipse 40% 55% at 82% 60%, rgba(0, 201, 167, .03), transparent);
      pointer-events: none;
    }

    .contact-header-new {
      text-align: center;
      margin-bottom: 80px;
    }

    .contact-header-new .section-tag {
      margin-bottom: 20px;
    }

    .contact-header-new h2 {
      margin-bottom: 16px;
    }

    .contact-header-new p {
      max-width: 540px;
      margin: 0 auto;
      font-size: 1.02rem;
    }

    .contact-grid-new {
      display: grid;
      grid-template-columns: 1fr 1.45fr;
      gap: 60px;
      align-items: start;
    }

    .contact-info-title {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .16em;
      color: var(--text-faint);
      text-transform: uppercase;
      margin-bottom: 28px;
    }

    .contact-detail {
      display: flex;
      align-items: flex-start;
      gap: 18px;
      padding: 24px 0;
      border-bottom: 1px solid var(--border);
    }

    .contact-detail:last-of-type {
      border-bottom: none;
    }

    .contact-detail-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-sm);
      background: var(--green-dim);
      border: 1px solid var(--border-green);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .contact-detail-body strong {
      display: block;
      font-size: .83rem;
      color: var(--text-primary);
      font-weight: 600;
      margin-bottom: 4px;
    }

    .contact-detail-body a,
    .contact-detail-body span {
      font-size: .88rem;
      color: var(--text-muted);
      transition: color .25s;
    }

    .contact-detail-body a:hover {
      color: var(--green);
    }

    .contact-socials {
      display: flex;
      gap: 12px;
      margin-top: 36px;
    }

    .social-icon-btn {
      width: 42px;
      height: 42px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--bg-card);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: all .25s ease;
      text-decoration: none;
    }

    .social-icon-btn:hover {
      border-color: var(--green);
      color: var(--green);
      background: var(--green-dim);
    }

    .contact-form-new {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 48px;
    }

    .form-title-new {
      font-size: 1.08rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 32px;
    }

    .form-row-new {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-group-new {
      margin-bottom: 18px;
    }

    .form-group-new label {
      display: block;
      font-size: .75rem;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: .05em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .form-group-new input,
    .form-group-new select,
    .form-group-new textarea {
      width: 100%;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 13px 18px;
      color: var(--text-primary);
      font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
      font-size: .88rem;
      transition: border-color .25s, box-shadow .25s, background .25s;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
    }

    .form-group-new input::placeholder,
    .form-group-new textarea::placeholder {
      color: var(--text-faint);
    }

    .form-group-new input:focus,
    .form-group-new select:focus,
    .form-group-new textarea:focus {
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(92, 184, 144, .12);
      background: rgba(92, 184, 144, .04);
    }

    .form-group-new select option {
      background: var(--dropdown-bg);
      color: var(--text-primary);
    }

    .form-group-new textarea {
      resize: vertical;
      min-height: 110px;
    }

    .submit-btn-new {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: var(--green);
      color: #050d09;
      font-weight: 700;
      font-size: 1rem;
      padding: 18px 24px;
      border: none;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
      letter-spacing: .02em;
    }

    .submit-btn-new:hover {
      background: #4da67f;
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(92, 184, 144, 0.2);
    }

    .submit-btn-new:active {
      transform: translateY(0);
    }

    .submit-btn-new:disabled {
      background: var(--bg-2);
      color: var(--text-faint);
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .submit-btn-new:disabled::before {
      display: none;
    }

    .submit-btn-new::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
      transform: translateX(-100%);
      transition: transform .5s ease;
    }

    .submit-btn-new:hover::before {
      transform: translateX(100%);
    }

    .form-success-new {
      text-align: center;
      padding: 40px 20px;
    }

    /* Loader Dots */
    .loader-dots {
      display: inline-flex;
      gap: 3px;
    }

    .loader-dots span {
      width: 4px;
      height: 4px;
      background: currentColor;
      border-radius: 50%;
      animation: dots 1.4s infinite ease-in-out both;
    }

    .loader-dots span:nth-child(1) { animation-delay: -0.32s; }
    .loader-dots span:nth-child(2) { animation-delay: -0.16s; }

    @keyframes dots {
      0%, 80%, 100% { transform: scale(0); }
      40% { transform: scale(1.0); }
    }

    .success-circle {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--green-dim);
      border: 2px solid var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin: 0 auto 20px;
    }

    .form-success-new p {
      font-size: 1rem;
      color: var(--text-primary);
    }

    /* ═══════════════════════════
       RESPONSIVE
    ═══════════════════════════ */
    @media (max-width: 960px) {
      .about-split {
        grid-template-columns: 1fr;
        gap: 48px;
      }

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

      .story-card {
        padding: 0 3%;
      }

      .story-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px;
      }

      .story-visual {
        display: none;
      }

      .contact-grid-new {
        grid-template-columns: 1fr;
      }

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

      .form-row-new {
        grid-template-columns: 1fr;
      }

      .contact-form-new {
        padding: 28px;
      }
    }

    @media (max-width: 600px) {
      .industries-mega-grid {
        grid-template-columns: 1fr 1fr;
      }

      .trust-headline {
        font-size: 2rem;
      }

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

/* ═════════════════════════════════════
   SOLUTIONS PAGE SPECIFIC STYLES
═════════════════════════════════════ */

/* ── SOLUTIONS HERO ── */
.sol-hero {
  position: relative;
  padding: 100px 0 100px;
  overflow: hidden;
  background: var(--bg-0);
  text-align: center;
}

.sol-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(92,184,144,.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(92,184,144,.06) 0%, transparent 60%);
  pointer-events: none;
}

.sol-hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(92, 184, 144, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 184, 144, .04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
}

.sol-hero-content {
  position: relative;
  z-index: 2;
}

.sol-hero h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--text-primary);
  margin: 20px 0 24px;
  line-height: 1;
}

.sol-hero-sub {
  font-size: clamp(.95rem, 2vw, 1.2rem);
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.75;
}
/* ── SOLUTIONS FILTER BAR ── */
.sol-filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 40px;
}

.sol-filter-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sol-filter-btn:hover {
  border-color: rgba(92, 184, 144, 0.4);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.sol-filter-btn.active {
  background: rgba(92, 184, 144, 0.15);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 15px rgba(92, 184, 144, 0.2);
}

/* ── COMPACT SOLUTIONS GRID ── */
.solutions-grid.sol-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px;
}

.solution-card.compact {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.solution-card.compact::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--radius-md);
  background: var(--grad-brand-vivid);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.solution-card.filtered-out {
  display: none !important;
}

.solution-card.compact:hover {
  transform: translateY(-6px);
  border-color: transparent;
  background: rgba(92, 184, 144, 0.05);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(92, 184, 144, 0.15);
}

.solution-card.compact:hover::before {
  opacity: 1;
}

.solution-card.compact .card-body {
  padding: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.solution-card.compact h3 {
  font-size: 1.15rem;
  margin: 12px 0 8px;
  color: var(--text-primary);
  line-height: 1.3;
}

.solution-card.compact p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.solution-card.compact .sol-workflow-bar {
  margin-top: auto;
  margin-bottom: 20px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
}

.card-link-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}

.solution-card.compact:hover .card-link-text {
  gap: 10px;
}

.solution-card.compact::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(92, 184, 144, 0.05), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.solution-card.compact:hover::after {
  opacity: 1;
}

/* ── WORKFLOW BAR ── */
.sol-workflow-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: rgba(92, 184, 144, .05);
  border: 1px solid rgba(92, 184, 144, .12);
  border-radius: var(--radius-sm);
}

.sol-workflow-bar span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  white-space: nowrap;
}

.wf-arrow {
  color: var(--green) !important;
  font-weight: 700 !important;
  font-size: .8rem !important;
}

/* ── MODAL OVERLAY ── */
.sol-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.sol-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.sol-modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(24px) scale(.97);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 0 1px rgba(92, 184, 144, .1);
  scrollbar-width: thin;
  scrollbar-color: var(--border-green) transparent;
}

.sol-modal-overlay.open .sol-modal {
  transform: translateY(0) scale(1);
}

.sol-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}

.sol-modal-close:hover {
  border-color: var(--border-green);
  color: var(--green);
  background: var(--green-dim);
}

/* Modal image */
.sol-modal-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sol-modal-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sol-modal-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, var(--bg-1) 100%);
}

.sol-modal-badge {
  position: absolute;
  top: 16px;
  left: 20px;
  background: rgba(5, 13, 9, .85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-green);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--green);
  text-transform: uppercase;
}

/* Modal body */
.sol-modal-body {
  padding: 24px 32px 36px;
}

.sol-modal-body .section-tag {
  margin-bottom: 12px;
}

.sol-modal-body h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 14px;
  color: var(--text-primary);
}

.sol-modal-intro {
  font-size: .95rem;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.75;
}

/* Modal sections */
.sol-modal-section {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}

.sol-modal-section:hover {
  border-color: var(--border-green);
}

.sol-modal-section-title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
}

/* Lists */
.sol-modal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.sol-modal-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.sol-modal-list li::before {
  content: '-';
  color: var(--green);
  flex-shrink: 0;
  font-weight: 700;
  margin-top: 1px;
}

.sol-modal-check li::before {
  content: '✓';
  color: var(--green);
  font-size: .85rem;
}

/* Modal workflow stages */
.sol-modal-workflow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sol-modal-wf-stage {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sol-modal-wf-step {
  background: var(--green-dim);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}

.sol-modal-wf-arrow {
  color: var(--text-faint);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Approach text */
#sol-modal-approach {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0;
}

/* Modal Highlights Section */
.sol-modal-highlight {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: rgba(92, 184, 144, 0.05);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
}

.sol-modal-highlight .sol-modal-section-title {
  margin-bottom: 0.75rem;
  color: var(--green);
}

.sol-modal-highlight-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sol-modal-highlight-list li {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sol-modal-highlight-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 5px;
}

/* ── SOLUTIONS RESPONSIVE ── */
@media (max-width: 1024px) {
  .sol-3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .sol-hero {
    padding: 140px 0 80px;
  }
  .sol-3col {
    grid-template-columns: 1fr !important;
  }
  .sol-modal-body {
    padding: 20px 20px 28px;
  }
  .sol-modal-img-wrap {
    height: 180px;
  }
}

/* ── BUILD YOUR SOLUTION FORM ── */
.sol-form-section {
  padding: 100px 0;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
}

.sol-form-container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 60px;
  box-shadow: 0 30px 60px rgba(0,0,0,.3);
}

.sol-form-header {
  text-align: center;
  margin-bottom: 50px;
}

.sol-form-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 15px;
  color: var(--text-primary);
}

.sol-form-header p {
  color: var(--text-muted);
  max-width: 500px;
  margin: 0 auto;
}

.form-section-group {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.form-section-title {
  font-size: 1.1rem;
  color: var(--green);
  margin-bottom: 25px;
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  letter-spacing: .02em;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-sublabel {
  display: block;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 15px;
}

/* Checkbox Grid */
.interests-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 10px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all .2s ease;
}

.checkbox-container:hover {
  background: rgba(92,184,144,.05);
  border-color: rgba(92,184,144,.3);
}

.checkbox-container input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  cursor: pointer;
}

.checkbox-label {
  font-size: .85rem;
  color: var(--text-primary);
}

.form-submit-wrap {
  margin-top: 40px;
}

/* Success State */
.sol-form-success {
  text-align: center;
  padding: 40px 0;
  animation: fadeInDown .5s ease;
}

.success-icon {
  width: 80px;
  height: 80px;
  background: var(--green-dim);
  color: var(--green);
  border: 2px solid var(--border-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto 24px;
}

.sol-form-success h3 {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.sol-form-success p {
  color: var(--text-muted);
  margin-bottom: 30px;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .sol-form-container {
    padding: 30px 20px;
  }
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
  .interests-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═════════════════════════════════════
   CUSTOMER STORIES (SOCIAL FEED)
═════════════════════════════════════ */
.customer-stories {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: var(--bg-1);
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.story-card {
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.story-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--green-dim);
}

.story-header {
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.story-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  border: 1px solid var(--border-green);
}

.story-user {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.story-user strong {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.story-user span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.story-icon {
  color: var(--text-muted);
  transition: color var(--transition);
}

.story-icon:hover {
  color: var(--green);
}

.story-image-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg-2);
}

.story-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.story-card:hover .story-img {
  transform: scale(1.03);
}

.story-body {
  padding: 16px;
}

.story-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.story-actions svg {
  cursor: pointer;
  transition: color var(--transition), transform 0.2s;
}

.story-actions svg:hover {
  color: var(--green);
  transform: scale(1.1);
}

.story-caption {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.story-caption strong {
  color: var(--text-primary);
  margin-right: 6px;
}

/* ═════════════════════════════════════
   MOBILE FIXES (ADDED VIA IMPLEMENTATION PLAN)
═════════════════════════════════════ */
@media (max-width: 768px) {
  /* Fix home page banner (Hero) typography */
  .hero {
    min-height: auto;
    max-height: none;
    height: auto;
    aspect-ratio: auto;
    padding: 60px 0 80px 0;
  }
  .hero-headline {
    font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
    line-height: 1.1;
  }
  .hero-line[style] {
    font-size: 1rem !important; /* The 'We Represent' text which was 0.5em of the tiny headline */
    letter-spacing: 0.15em !important;
  }
  .hero-sub {
    font-size: 1rem;
    line-height: 1.5;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 16px;
  }
  .hero-actions .btn {
    justify-content: center;
  }

  /* Global Typography adjustments for mobile */
  h1 { font-size: clamp(2.2rem, 8vw, 3rem) !important; }
  h2 { font-size: clamp(1.8rem, 6vw, 2.5rem) !important; }
  h3 { font-size: clamp(1.2rem, 5vw, 1.5rem) !important; }

  /* Stack multi-column grids */
  .i-grid,
  .brand-grid,
  .features-grid,
  .stats-grid,
  .who-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  /* Images responsive */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* ═════════════════════════════════════
   LATEST EVENT POPUP MODAL
   ═════════════════════════════════════ */
body.popup-open {
  overflow: hidden;
}

.event-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.event-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.event-popup-card {
  position: relative;
  background: linear-gradient(145deg, #f5f3ee 0%, #ece8e1 100%);
  border: 1px solid rgba(80, 80, 80, 0.16);
  border-radius: 20px;
  width: min(92%, 580px);
  max-width: 580px;
  max-height: 94vh;
  overflow-y: auto;
  box-shadow: 0 18px 40px rgba(15, 15, 15, 0.16);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease, opacity 0.25s ease;
  display: flex;
  flex-direction: column;
}

.event-popup-overlay.active .event-popup-card {
  transform: translateY(0) scale(1);
}

.event-popup-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.event-popup-close-btn:hover {
  background: rgba(60, 60, 60, 0.9);
  border-color: rgba(60, 60, 60, 0.9);
  color: #fff;
  transform: rotate(90deg);
}

.event-popup-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  display: block;
  line-height: 0;
  padding-top: 2px;
}

.event-popup-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  object-fit: cover;
  object-position: top center;
  transform-origin: top center;
  transition: transform 0.3s ease;
}

.event-popup-img-wrap:hover img {
  transform: scale(1.03);
}

.event-popup-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.event-popup-title {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: #1f1f1f;
  line-height: 1.3;
  margin: 0;
}

.event-popup-desc {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5f5b56;
  margin: 0;
}

.event-popup-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: #4a4a4a !important;
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  padding: 0;
  margin-top: 4px;
  transition: color 0.2s ease;
  box-shadow: none;
  align-self: flex-start;
}

.event-popup-cta:hover {
  transform: none;
  box-shadow: none;
  background: none;
  color: #1f1f1f !important;
}

@media (max-width: 576px) {
  .event-popup-card {
    width: 94%;
    max-width: 100%;
  }
  .event-popup-content {
    padding: 20px;
  }
  .event-popup-title {
    font-size: 1.2rem;
  }
}

/* ─────────────────────────────────────────────────
   MORE THAN TECHNOLOGY SECTION (HOME PAGE)
───────────────────────────────────────────────── */
.more-than-tech-section {
  padding: 80px 0;
  background: var(--bg-1);
  position: relative;
  overflow: hidden;
}

.more-than-tech-section::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
  pointer-events: none;
}

.mtt-header {
  max-width: 860px;
  margin: 0 auto 48px auto;
  text-align: center;
}

.mtt-intro-p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-primary);
  margin-top: 16px;
  font-weight: 400;
}

.vm-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

.vm-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.vm-card:hover {
  border-color: var(--border-green);
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
  background: var(--bg-card-h);
}

.vm-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 16px;
}

.vm-card h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
  color: var(--text-primary);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
}

.vm-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
  flex-grow: 1;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all var(--transition);
}

.pillar-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  background: var(--bg-card-h);
}

.pillar-icon-check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--border-green);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
}

.pillar-text {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────
   ABOUT US PAGE - VISION, MISSION & CORE VALUES
───────────────────────────────────────────────── */
.about-vm-section {
  padding: 80px 0;
  background: var(--bg-0);
  position: relative;
}

.about-vm-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.about-vm-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 44px 38px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}

.about-vm-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--green), transparent);
}

.about-vm-box:hover {
  border-color: var(--border-green);
  box-shadow: var(--shadow-green);
  transform: translateY(-3px);
}

.about-vm-tag {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--green);
  margin-bottom: 12px;
  display: block;
}

.about-vm-box h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  margin-bottom: 20px;
  color: var(--text-primary);
  line-height: 1.15;
}

.about-vm-box.vision-box .vm-large-text {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.7;
  color: var(--text-primary);
  font-weight: 500;
  border-left: 3px solid var(--green);
  padding-left: 20px;
  margin: 0;
}

.about-vm-box.mission-box p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0;
}

/* Core Values Section */
.core-values-section {
  padding: 80px 0;
  background: var(--bg-1);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.value-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  transition: all var(--transition);
}

.value-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
  background: var(--bg-card-h);
}

.value-num {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--border-green);
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 16px;
}

.value-card h3 {
  font-size: 1.2rem;
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  color: var(--text-primary);
  margin-bottom: 10px;
}

.value-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* Responsiveness for new sections */
@media (max-width: 1024px) {
  .vm-cards-grid,
  .about-vm-container {
    grid-template-columns: 1fr;
  }
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .values-grid {
    grid-template-columns: 1fr;
  }
  .about-vm-box {
    padding: 28px 20px;
  }
}

/* ─────────────────────────────────────────────────
   PTZOPTICS BRAND STYLES & LAYOUTS
───────────────────────────────────────────────── */

/* Mega Dropdown Adjustments for 4 items */
.mega-dropdown-grid.has-4-items {
  grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 900px) {
  .mega-dropdown-grid.has-4-items {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* PTZ Spotlight on Homepage */
.ptz-spotlight-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--bg-1) 0%, #03181a 50%, var(--bg-0) 100%);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ptz-spotlight-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 60%);
  pointer-events: none;
}

.ptz-spotlight-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}

.ptz-spotlight-grid > * {
  flex: 1 1 280px;
}

.ptz-spotlight-content .brand-announcement-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-dim);
  border: 1px solid var(--border-green);
  color: var(--green);
  padding: 6px 16px;
  border-radius: 100px;
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.ptz-spotlight-content h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.ptz-spotlight-content p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.ptz-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.ptz-ft-tag {
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ptz-ft-tag::before {
  content: '✓';
  color: var(--green);
  font-weight: 800;
}

/* PTZ Landing Page Hero - Text aligned directly below Camixel logo */
.ptz-hero {
  position: relative;
  min-height: 80vh;
  padding: 130px 24px 90px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: left;
  background: var(--bg-0);
}

.ptz-hero .container {
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ptz-hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
}

.ptz-hero-overlay-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(2, 11, 13, 0.98) 0%,
    rgba(2, 11, 13, 0.88) 25%,
    rgba(2, 11, 13, 0.35) 40%,
    transparent 55%
  );
  z-index: 1;
  pointer-events: none;
}

.ptz-hero-content {
  position: relative;
  z-index: 2;
  max-width: 580px;
  width: 100%;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.ptz-hero-content h1 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.ptz-hero-content p {
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.ptz-hero-content .hero-actions {
  justify-content: flex-start;
  gap: 12px;
}

/* Why PTZOptics Grid */
.why-ptz-section {
  padding: 80px 0;
  background: var(--bg-0);
}

.why-ptz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 48px;
  align-items: stretch;
}

.why-ptz-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  transition: all var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.why-ptz-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  background: var(--bg-card-h);
  box-shadow: var(--shadow-green);
}

.why-ptz-card .ptz-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
}

.why-ptz-card h4 {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.why-ptz-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Industries Large Visual Grid */
.ptz-industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.ptz-ind-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.ptz-ind-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--green), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.ptz-ind-card:hover {
  border-color: var(--border-green);
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
}

.ptz-ind-card:hover::before {
  opacity: 1;
}

.ptz-ind-badge {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

.ptz-ind-card h3 {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.ptz-ind-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ptz-ind-card li {
  font-size: 0.88rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ptz-ind-card li::before {
  content: '▸';
  color: var(--green);
  font-weight: bold;
}

/* Interactive Workflow Flowchart */
.workflow-section {
  padding: 80px 0;
  background: var(--bg-1);
}

.workflow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 48px 0;
  padding: 36px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-green);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-green);
}

.wf-step-node {
  background: var(--bg-2);
  border: 1.5px solid var(--green);
  color: var(--text-primary);
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-align: center;
  min-width: 120px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.wf-arrow-next {
  color: var(--green);
  font-size: 1.5rem;
  font-weight: 800;
}

.wf-compat-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.wf-compat-chip {
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.wf-compat-chip strong {
  color: var(--green);
}

/* Cross-Brand Integrated Workflows */
.crossbrand-section {
  padding: 80px 0;
  background: var(--bg-0);
}

.cb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.cb-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}

.cb-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  background: var(--bg-card-h);
}

.cb-card h3 {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cb-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cb-card li {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding-left: 20px;
  position: relative;
}

.cb-card li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.cb-card li strong {
  color: var(--text-primary);
}

/* Why Buy From Camixel (Value Addition) */
.camixel-value-section {
  padding: 80px 0;
  background: var(--bg-1);
}

.cv-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.cv-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  transition: all var(--transition);
}

.cv-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  background: var(--bg-card-h);
}

.cv-card .cv-icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
  display: block;
}

.cv-card h4 {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 0.88rem;
  color: var(--text-primary);
  margin: 0;
}

/* Dedicated Product Categories */
.ptz-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.ptz-cat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--transition);
}

.ptz-cat-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
}

.ptz-cat-card h3 {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.ptz-cat-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Full Width CTA Banner */
.ptz-cta-banner {
  padding: 80px 0;
  background: linear-gradient(135deg, #032b26 0%, #064e3b 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ptz-cta-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ptz-cta-banner .hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.ptz-cta-banner h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  color: #fff;
  margin-bottom: 16px;
}

.ptz-cta-banner p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 650px;
  margin: 0 auto 32px auto;
}

/* Responsiveness for PTZOptics */
@media (max-width: 1024px) {
  .ptz-spotlight-grid,
  .ptz-industries-grid,
  .cb-grid,
  .ptz-categories-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cv-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .ptz-spotlight-grid,
  .ptz-industries-grid,
  .cb-grid,
  .ptz-categories-grid {
    grid-template-columns: 1fr;
  }
  .cv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .workflow-diagram {
    flex-direction: column;
  }
  .wf-arrow-next {
    transform: rotate(90deg);
  }
}

/* PTZ Image Placeholders & Hero Video Overlay */

.ptz-hero-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 11, 13, 0.85) 0%, rgba(3, 18, 21, 0.95) 100%);
  z-index: 1;
}

.ptz-img-frame {
  width: 100%;
  height: 200px;
  background: var(--bg-card);
  border: 1.5px dashed var(--border-green);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.ptz-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ptz-img-frame:hover img {
  transform: scale(1.06);
}

.ptz-img-frame-placeholder {
  color: var(--text-muted);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
}

.ptz-img-frame-placeholder svg {
  opacity: 0.4;
  color: var(--green);
}

/* Video Gallery Grid */
.ptz-video-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.ptz-video-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}

.ptz-video-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: var(--shadow-green);
}

.ptz-video-thumb {
  position: relative;
  width: 100%;
  height: 180px;
  background: #000;
}

.ptz-video-thumb video,
.ptz-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ptz-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(92, 184, 144, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  box-shadow: 0 0 20px var(--green-glow);
  transition: all 0.3s;
}

.ptz-video-card:hover .ptz-play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  background: var(--green);
}

.ptz-video-info {
  padding: 20px;
}

.ptz-video-info h4 {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.ptz-video-info p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 900px) {
  .ptz-video-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ptz-video-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* Performance / smoothness improvements */
.nav-header,
.nav-container,
.nav-links,
.nav-cta { backface-visibility: hidden; }

.hero-bg-wrapper { will-change: transform; transform: translate3d(0,0,0); }


img { height: auto; }

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

/* Shared premium interface rules continue in design.css. */

/* ===== Source: site-foundation.css ===== */
/* Camixel shared design foundation. */

/*
  Camixel Technologies - Premium Product Interface
  One shared system for navigation, buttons, cards, forms, FAQs and product commerce.
  Page-specific composition remains in /pages/*.css.
*/

:root {
  --cx-bg: #06100b;
  --cx-bg-2: #09150f;
  --cx-surface: #0c1812;
  --cx-surface-2: #101e16;
  --cx-surface-3: #13231a;
  --cx-white: #f7faf8;
  --cx-text: #edf3ef;
  --cx-copy: #a8b5ad;
  --cx-muted: #75847b;
  --cx-line: rgba(223, 239, 230, 0.12);
  --cx-line-strong: rgba(223, 239, 230, 0.22);
  --cx-green: #62c99c;
  --cx-green-2: #79d9ae;
  --cx-green-dark: #2d7a58;
  --cx-black: #05100a;
  --cx-product-bg: #f3f6f4;
  --cx-product-ink: #111914;
  --cx-danger: #ff7a7a;
  --cx-header: 76px;
  --cx-max: 1460px;
  --cx-radius-sm: 4px;
  --cx-radius: 8px;
  --cx-radius-lg: 14px;
  --cx-shadow: 0 18px 48px rgba(0,0,0,.22);
  --cx-shadow-soft: 0 8px 28px rgba(0,0,0,.16);

  /* map legacy tokens onto the new system */
  --green: var(--cx-green);
  --green-dark: var(--cx-green-dark);
  --green-dim: rgba(98,201,156,.10);
  --green-glow: rgba(98,201,156,.18);
  --bg-0: var(--cx-bg);
  --bg-1: var(--cx-bg-2);
  --bg-2: var(--cx-surface);
  --bg-card: var(--cx-surface);
  --bg-card-h: var(--cx-surface-2);
  --border: var(--cx-line);
  --border-green: rgba(98,201,156,.32);
  --text-primary: var(--cx-text);
  --text-muted: var(--cx-copy);
  --text-faint: var(--cx-muted);
  --radius-sm: var(--cx-radius-sm);
  --radius-md: var(--cx-radius);
  --radius-lg: var(--cx-radius-lg);
  --radius-xl: 18px;
  --shadow-green: var(--cx-shadow-soft);
  --grad-text: linear-gradient(90deg, #7bdcaf 0%, #54c895 100%);
}

html {
  scroll-padding-top: calc(var(--cx-header) + 24px);
  overflow-x: clip;
  background: var(--cx-bg);
}

body.premium-ui {
  margin: 0;
  padding-top: 0;
  overflow-x: clip;
  background: var(--cx-bg);
  color: var(--cx-text);
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.premium-ui h1,
body.premium-ui h2,
body.premium-ui h3,
body.premium-ui h4,
body.premium-ui h5,
body.premium-ui h6 {
  font-family: var(--cx-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  color: var(--cx-text);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

body.premium-ui p { color: var(--cx-copy); }
body.premium-ui a { text-underline-offset: 3px; }
body.premium-ui img { max-width: 100%; }
body.premium-ui [id] { scroll-margin-top: calc(var(--cx-header) + 28px); }

.container,
section > .container,
footer > .container {
  width: min(calc(100% - 64px), var(--cx-max));
  max-width: var(--cx-max);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.nav-header,
.nav-header.scrolled {
  position: sticky;
  top: 0;
  z-index: 5000;
  width: 100%;
  height: var(--cx-header);
  margin: 0;
  padding: 0;
  background: rgba(5, 14, 9, .98);
  border: 0;
  border-bottom: 1px solid var(--cx-line);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.nav-container {
  width: min(calc(100% - 56px), var(--cx-max));
  max-width: var(--cx-max);
  height: var(--cx-header);
  min-height: var(--cx-header);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 24px;
}

.nav-logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.site-logo-header {
  display: block;
  width: auto;
  height: 34px;
}

.nav-links {
  justify-self: center;
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 1.55vw, 30px);
  margin: 0;
  min-width: 0;
  overflow: visible;
}

.nav-item { position: static; }

.nav-link {
  position: relative;
  min-height: var(--cx-header);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #b9c5bd;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--cx-green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .16s ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active,
.nav-item:hover > .nav-link,
.nav-item.brands-open > .nav-link {
  color: #fff;
  background: transparent;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after,
.nav-item:hover > .nav-link::after,
.nav-item.brands-open > .nav-link::after { transform: scaleX(1); }

.chevron {
  opacity: .65;
  transition: transform .16s ease;
}
.nav-item:hover .chevron,
.nav-item.brands-open .chevron { transform: rotate(180deg); }

.nav-cta {
  justify-self: end;
  display: flex;
  align-items: center;
  margin: 0;
}

.nav-cta-link {
  min-height: 42px;
  padding: 0 13px 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--cx-black);
  background: var(--cx-green);
  border: 1px solid var(--cx-green);
  border-radius: 5px;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.nav-cta-link svg {
  width: 17px;
  height: 17px;
  padding-left: 10px;
  box-sizing: content-box;
  border-left: 1px solid rgba(5,16,10,.26);
}

.nav-cta-link:hover,
.nav-cta-link:focus-visible {
  background: var(--cx-green-2);
  border-color: var(--cx-green-2);
  color: #031008;
}

.hamburger {
  justify-self: end;
  width: 42px;
  height: 42px;
  padding: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--cx-line);
  border-radius: 5px;
  background: transparent;
}
.hamburger span {
  width: 18px;
  height: 1px;
  background: #f3f7f4;
  transition: transform .16s ease, opacity .16s ease;
}

/* Brand mega menu: a single editorial surface, no nested cards. */
.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  background: #08130d;
  border: 0;
  border-top: 1px solid var(--cx-line);
  border-bottom: 1px solid var(--cx-line);
  border-radius: 0;
  box-shadow: 0 28px 64px rgba(0,0,0,.34);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  z-index: 5100;
}
.has-dropdown:hover > .mega-dropdown,
.has-dropdown:focus-within > .mega-dropdown,
.has-dropdown.brands-open > .mega-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-shell {
  width: min(calc(100% - 64px), var(--cx-max));
  margin: 0 auto;
  padding: 34px 0 38px;
  display: grid;
  grid-template-columns: minmax(280px,.72fr) minmax(0,1.95fr);
  gap: 48px;
}

.mega-intro {
  padding: 4px 44px 4px 0;
  border-right: 1px solid var(--cx-line);
}

.mega-kicker,
.section-tag,
.form-section-title,
.support-aside-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cx-green);
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* clean vertical splitter in place of long decorative dash motifs */
.mega-kicker::before,
.section-tag::before,
.form-section-title::before,
.support-aside-kicker::before {
  content: "";
  width: 2px;
  height: 15px;
  flex: 0 0 auto;
  background: var(--cx-green);
}
.section-tag::after,
.mega-kicker::after,
.support-aside-kicker::after { content: none; display: none; }

.mega-intro h2 {
  margin: 13px 0 0;
  max-width: 390px;
  font-size: clamp(22px,2vw,30px);
  line-height: 1.13;
}
.mega-intro p {
  margin: 13px 0 20px;
  max-width: 430px;
  color: var(--cx-copy);
  font-size: 13px;
  line-height: 1.65;
}
.mega-all-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
}

.mega-brand-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  border-top: 1px solid var(--cx-line);
  border-left: 1px solid var(--cx-line);
}
.mega-brand {
  position: relative;
  min-width: 0;
  min-height: 164px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  color: var(--cx-text);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--cx-line);
  border-bottom: 1px solid var(--cx-line);
  border-radius: 0;
  transition: background .14s ease;
}
.mega-brand:hover,
.mega-brand:focus-visible { background: rgba(98,201,156,.055); }
.mega-logo-stage {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  border: 0;
}
.mega-logo-stage img {
  width: auto;
  height: auto;
  max-width: 132px;
  max-height: 40px;
  object-fit: contain;
  object-position: left center;
}
.mega-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mega-brand-copy strong { font-size: 13px; font-weight: 700; letter-spacing: -.015em; }
.mega-brand-copy small { color: var(--cx-muted); font-size: 11px; line-height: 1.45; }
.mega-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--cx-muted);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   BUTTONS / CTAS
   -------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-primary-sm,
.btn-ghost,
.btn-outline-sm,
.btn-lg,
.cat-cta,
.model-card-link {
  border-radius: 5px;
}

.btn {
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary,
.btn-primary-sm {
  color: var(--cx-black);
  background: var(--cx-green);
  border-color: var(--cx-green);
}
.btn-primary:hover,
.btn-primary-sm:hover,
.btn-primary:focus-visible,
.btn-primary-sm:focus-visible {
  color: #031008;
  background: var(--cx-green-2);
  border-color: var(--cx-green-2);
  transform: none;
  box-shadow: none;
}
.btn-ghost,
.btn-outline-sm {
  color: var(--cx-text);
  background: transparent;
  border-color: var(--cx-line-strong);
}
.btn-ghost:hover,
.btn-outline-sm:hover,
.btn-ghost:focus-visible,
.btn-outline-sm:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.035);
  border-color: rgba(98,201,156,.45);
  transform: none;
  box-shadow: none;
}
.btn-lg { min-height: 48px; padding-inline: 21px; }

/* --------------------------------------------------------------------------
   SECTION RHYTHM / TYPOGRAPHY
   -------------------------------------------------------------------------- */
.section-header { max-width: 820px; }
.section-header.text-center,
.text-center.section-header { margin-inline: auto; text-align: center; }
.section-title {
  margin-top: 14px;
  color: var(--cx-text);
  font-size: clamp(30px,4vw,54px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.section-sub {
  max-width: 720px;
  margin: 16px auto 0;
  color: var(--cx-copy);
  font-size: 15px;
  line-height: 1.7;
}
.text-accent {
  color: var(--cx-green);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

/* Remove template-like decorative overlays globally. */
.hero-mesh-glow,
.hero-grid-overlay,
.hero-scroll-hint,
.scroll-line,
.senn-waveform,
.orb,
.particles,
.cursor-dot,
.cursor-ring { display: none; }

/* --------------------------------------------------------------------------
   HOME BRANDS: one clean logo rail, no double boxes
   -------------------------------------------------------------------------- */
.brands-section {
  border-top: 1px solid var(--cx-line);
  border-bottom: 1px solid var(--cx-line);
  background: #07110c;
}
.brands-section-title {
  margin: 0 0 28px;
  color: var(--cx-green);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}
.brands-static-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0;
  border-top: 1px solid var(--cx-line);
  border-left: 1px solid var(--cx-line);
}
.brand-card {
  min-height: 148px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--cx-line);
  border-bottom: 1px solid var(--cx-line);
  border-radius: 0;
  box-shadow: none;
  transition: background .14s ease;
}
.brand-card:hover,
.brand-card:focus-visible {
  background: rgba(98,201,156,.045);
  transform: none;
  box-shadow: none;
}
.brand-logo-img {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 58px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   COMMERCE / PRODUCT CATALOGUE
   -------------------------------------------------------------------------- */
.cat-products-grid,
.models-grid,
.ptz-categories-grid {
  gap: 16px;
}

.commerce-card {
  position: relative;
  overflow: hidden;
  background: var(--cx-surface);
  border: 1px solid var(--cx-line);
  border-radius: 9px;
  box-shadow: none;
  transform: none;
  transition: border-color .16s ease, background .16s ease;
}
.commerce-card:hover,
.commerce-card:focus-within {
  border-color: rgba(98,201,156,.40);
  background: #0e1b14;
  box-shadow: none;
  transform: none;
}

/* Blackmagic catalogue */
.product-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--cx-text);
  text-decoration: none;
}
.prod-img-wrap {
  position: relative;
  width: 100%;
  min-height: 210px;
  aspect-ratio: 4 / 3;
  padding: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#f7f9f8 0%,#eef2ef 100%);
  border: 0;
  border-radius: 0;
}
.prod-img-wrap img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: contain;
  filter: none;
  transform: none;
  transition: transform .18s ease;
}
.product-card:hover .prod-img-wrap img { transform: scale(1.018); }
.product-card h4 {
  margin: 0;
  padding: 17px 18px 7px;
  color: var(--cx-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.product-card::after {
  content: "View manufacturer page  ↗";
  margin-top: auto;
  padding: 4px 18px 17px;
  color: var(--cx-muted);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .02em;
}
.cat-banner {
  overflow: hidden;
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  background: var(--cx-surface);
}
.cat-info {
  padding-right: 22px;
}
.cat-number {
  color: var(--cx-green);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cat-tabs,
.cat-tabs-inner {
  gap: 0;
  border-bottom: 1px solid var(--cx-line);
}
.cat-tab,
.cat-tab-btn,
.filter-btn {
  min-height: 44px;
  padding: 0 16px;
  color: var(--cx-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
  transform: none;
}
.cat-tab:hover,
.cat-tab.active,
.cat-tab-btn:hover,
.cat-tab-btn.active,
.filter-btn:hover,
.filter-btn.active {
  color: #fff;
  background: transparent;
  border-bottom-color: var(--cx-green);
  transform: none;
  box-shadow: none;
}

/* EIZO / EIZO Medical */
.model-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.model-card-img {
  position: relative;
  min-height: 250px;
  padding: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#f8faf9 0%,#edf1ee 100%);
  border: 0;
  border-radius: 0;
}
.model-card-img img {
  width: 100%;
  max-width: 310px;
  max-height: 230px;
  object-fit: contain;
}
.model-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 7px;
  color: #174c36;
  background: #dff4e9;
  border: 1px solid rgba(45,122,88,.18);
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.model-card-body {
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.model-card-body h3,
.model-card-body h4 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
}
.model-card-body p { font-size: 12.5px; line-height: 1.6; }
.model-specs {
  margin: 14px 0 0;
  padding: 13px 0 0;
  border-top: 1px solid var(--cx-line);
}
.model-card-link {
  margin: 12px 20px 18px;
  min-height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cx-text);
  border: 1px solid var(--cx-line-strong);
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}
.model-card-link:hover { border-color: rgba(98,201,156,.48); background: rgba(98,201,156,.06); }

/* PTZOptics catalogue */
.ptz-cat-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ptz-img-frame {
  min-height: 245px;
  padding: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg,#f8faf9 0%,#edf1ee 100%);
  border: 0;
  border-radius: 0;
}
.ptz-img-frame img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: contain;
}
.ptz-cat-card > .vm-badge,
.ptz-cat-card > h3,
.ptz-cat-card > p,
.ptz-cat-card > .btn { margin-left: 20px; margin-right: 20px; }
.ptz-cat-card > .vm-badge {
  margin-top: 18px;
  align-self: flex-start;
  color: var(--cx-green);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ptz-cat-card > h3 { margin-top: 7px; font-size: 18px; line-height: 1.25; }
.ptz-cat-card > p { margin-top: 8px; margin-bottom: 18px; font-size: 12.5px; line-height: 1.6; }
.ptz-cat-card > .btn { margin-top: auto; margin-bottom: 20px; }

/* Sennheiser product ecosystem */
.eco-card {
  min-height: 116px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
}
.eco-card:hover,
.eco-card.active { transform: none; box-shadow: none; }
.eco-card.active {
  background: rgba(98,201,156,.07);
  border-color: rgba(98,201,156,.44);
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.cx-form,
.form-wrap,
.contact-form-new,
.contact-form-eizo,
.lead-form-wrap,
.sol-form-container {
  position: relative;
}

/* Outer form areas should read as one surface, not stacks of boxes. */
.contact-form-new,
.contact-form-eizo,
.lead-form-wrap,
.form-wrap,
.sol-form-container {
  background: var(--cx-surface);
  border: 1px solid var(--cx-line);
  border-radius: 10px;
  box-shadow: none;
}

.cx-form label,
.form-group-new label,
.form-grp label,
.form-group label,
.form-label {
  display: block;
  margin-bottom: 7px;
  color: #c5d0c9;
  font-size: 10.5px;
  font-weight: 720;
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cx-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cx-form select,
.cx-form textarea,
.form-group-new input:not([type="checkbox"]):not([type="radio"]),
.form-group-new select,
.form-group-new textarea,
.form-grp input,
.form-grp select,
.form-grp textarea,
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--cx-text);
  background: #09130e;
  border: 1px solid var(--cx-line-strong);
  border-radius: 5px;
  outline: 0;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cx-form textarea,
.form-group-new textarea,
.form-grp textarea,
.form-group textarea { min-height: 126px; resize: vertical; }

.cx-form input::placeholder,
.cx-form textarea::placeholder,
.form-group-new input::placeholder,
.form-group-new textarea::placeholder { color: #627068; }

.cx-form input:focus,
.cx-form select:focus,
.cx-form textarea:focus,
.form-group-new input:focus,
.form-group-new select:focus,
.form-group-new textarea:focus,
.form-grp input:focus,
.form-grp select:focus,
.form-grp textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(98,201,156,.65);
  background: #0a1710;
  box-shadow: 0 0 0 3px rgba(98,201,156,.08);
}

.form-row-new,
.form-row,
.form-grid-2 { gap: 16px; }
.form-group-new,
.form-grp,
.form-group { min-width: 0; }

.form-section-group,
.form-block {
  padding: 26px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cx-line);
  border-radius: 0;
}
.form-section-group:first-of-type,
.form-block:first-of-type { border-top: 0; padding-top: 0; }
.form-section-title,
.form-block-title {
  margin: 0 0 18px;
  color: var(--cx-green);
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.form-block-title::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 14px;
  margin-right: 9px;
  vertical-align: -2px;
  background: var(--cx-green);
}
.form-sublabel {
  margin: 0 0 14px;
  color: var(--cx-copy);
  font-size: 12.5px;
  font-weight: 550;
  text-transform: none;
  letter-spacing: 0;
}

/* Checkboxes/radios: a single option surface, never box-inside-box. */
.interests-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
}
.checkbox-container,
.radio-opt {
  position: relative;
  min-height: 48px;
  margin: 0;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #c4cec8;
  background: #09130e;
  border: 1px solid var(--cx-line);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.checkbox-container:hover,
.radio-opt:hover { border-color: rgba(98,201,156,.40); background: #0b1710; color: #fff; }
.checkbox-container:has(input:checked),
.radio-opt:has(input:checked) {
  color: #fff;
  border-color: rgba(98,201,156,.62);
  background: rgba(98,201,156,.075);
}
.checkbox-container input,
.radio-opt input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  accent-color: var(--cx-green);
}
.checkbox-label {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.radio-group { display: flex; flex-wrap: wrap; gap: 9px; }

.form-submit-wrap,
.form-submit-row {
  padding-top: 22px;
  border-top: 1px solid var(--cx-line);
}
.form-submit-wrap .btn,
.form-submit-row .btn,
.cx-form button[type="submit"] { min-height: 48px; }

/* --------------------------------------------------------------------------
   FAQ / STRUCTURED CONTENT
   JSON-LD remains in <head>; this is only the visible FAQ presentation.
   -------------------------------------------------------------------------- */
.faq-section,
.definition-section {
  width: min(calc(100% - 64px), 1060px);
  max-width: 1060px;
  margin: 0 auto;
}
.definition-section {
  padding: 66px 0 20px;
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.5fr);
  gap: 54px;
  align-items: start;
  border-top: 1px solid var(--cx-line);
}
.definition-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.definition-copy {
  margin: 0;
  color: var(--cx-copy);
  font-size: 14px;
  line-height: 1.75;
}

.faq-section { padding: 52px 0 82px; }
.faq-header { max-width: 720px; margin: 0 auto 28px; }
.faq-list {
  margin-top: 0;
  display: block;
  border-top: 1px solid var(--cx-line-strong);
}
.faq-item {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cx-line);
  border-radius: 0;
  box-shadow: none;
}
.faq-question {
  position: relative;
  width: 100% !important;
  min-height: 74px;
  padding: 24px 56px 24px 56px;
  display: flex;
  align-items: center;
  color: var(--cx-text);
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: -.015em;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-item::before {
  content: attr(data-faq-index);
  position: absolute;
  left: 0;
  top: 26px;
  color: var(--cx-green);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
}
.faq-question::before,
.faq-question::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: #b8c3bc;
  transition: transform .15s ease;
}
.faq-question::after { transform: rotate(90deg); }
.faq-item[open] .faq-question::after { transform: rotate(0); }
.faq-answer {
  margin: 0;
  width: 100% !important;
  max-width: 850px;
  padding: 0 56px 24px;
  color: var(--cx-copy);
  font-size: 13.5px;
  line-height: 1.75;
}
.faq-answer a { color: var(--cx-green-2); }
.faq-item summary,
.faq-item p,
.faq-item div {
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   CARDS / SOLUTIONS / SUPPORT - less template-like, fewer nested boxes
   -------------------------------------------------------------------------- */
.solution-card,
.trust-card,
.support-card,
.quick-action-btn,
.cv-card,
.cb-card,
.why-ptz-card,
.arch-card,
.val-card,
.team-card,
.news-card,
.event-card {
  border-radius: 8px;
  box-shadow: none;
  transform: none;
}
.solution-card:hover,
.trust-card:hover,
.support-card:hover,
.quick-action-btn:hover,
.cv-card:hover,
.cb-card:hover,
.why-ptz-card:hover,
.arch-card:hover,
.val-card:hover,
.team-card:hover,
.news-card:hover,
.event-card:hover {
  transform: none;
  box-shadow: none;
}

/* Solution cards become editorial catalogue entries rather than box stacks. */
.solutions-grid {
  gap: 14px;
}
.solution-card.compact {
  min-height: 250px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: var(--cx-surface);
  border: 1px solid var(--cx-line);
}
.solution-card.compact .solution-tag,
.solution-card.compact .sol-tag,
.solution-card.compact [class*="badge"] {
  width: auto;
  align-self: flex-start;
  padding: 0;
  color: var(--cx-green);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.solution-card.compact h3 { margin-top: 15px; font-size: 18px; line-height: 1.25; }
.solution-card.compact p { font-size: 12.5px; line-height: 1.65; }
.solution-card.compact .workflow-path,
.solution-card.compact .sol-flow,
.solution-card.compact [class*="path"] {
  margin-top: auto;
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--cx-line);
  border-radius: 0;
}

/* support hero/editorial alignment */
.support-page .hero-content,
.page-support .hero-content { max-width: 760px; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: #040b07;
  border-top: 1px solid var(--cx-line);
}
.footer-top { padding-top: 58px; }
.footer-grid { gap: 48px; }
.footer h4,
.footer-title { color: #f1f6f3; }
.footer a { color: #a8b5ad; }
.footer a:hover { color: #fff; }
.site-logo-footer { max-height: 36px; width: auto; }
.social-icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cx-line);
  border-radius: 5px;
  background: transparent;
}
.social-icon-btn:hover { border-color: rgba(98,201,156,.42); background: rgba(98,201,156,.05); }

/* --------------------------------------------------------------------------
   ACCESSIBILITY / MOTION
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 10000;
  transform: translateY(-160%);
  padding: 9px 12px;
  color: #05100a;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--cx-green); outline-offset: 3px; }
.reveal { transform: none; }
.reveal.visible { transform: none; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1260px) {
  .nav-container { grid-template-columns: minmax(160px,1fr) auto minmax(160px,1fr); gap: 18px; }
  .nav-links { gap: 16px; }
  .nav-link { font-size: 12.3px; }
  .nav-cta-link { padding-inline: 13px 10px; }
  .mega-shell { grid-template-columns: 260px minmax(0,1fr); gap: 34px; }
  .mega-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .interests-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1120px) {
  :root { --cx-header: 70px; }
  .nav-container {
    width: min(calc(100% - 32px), var(--cx-max));
    grid-template-columns: 1fr auto auto;
    gap: 12px;
  }
  .site-logo-header { height: 32px; }
  .nav-links { display: none; }
  .nav-cta { justify-self: end; }
  .hamburger { display: flex; }
  .nav-links.open {
    position: fixed;
    top: var(--cx-header);
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - var(--cx-header));
    padding: 12px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    background: #07110c;
    border-top: 1px solid var(--cx-line);
    border-bottom: 1px solid var(--cx-line);
  }
  .nav-links.open > .nav-link,
  .nav-links.open .nav-item { width: 100%; }
  .nav-links.open .nav-link {
    min-height: 50px;
    justify-content: space-between;
    border-bottom: 1px solid var(--cx-line);
  }
  .nav-links.open .nav-link::after { display: none; }
  .nav-links.open .mega-dropdown {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    transform: none;
    box-shadow: none;
    border: 0;
  }
  .nav-links.open .brands-open .mega-dropdown { display: block; }
  .nav-links.open .mega-shell {
    width: 100%;
    padding: 18px 0 24px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .nav-links.open .mega-intro { display: none; }
  .nav-links.open .mega-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nav-links.open .mega-brand { min-height: 115px; }

  .container,
  section > .container,
  footer > .container { width: min(calc(100% - 40px), var(--cx-max)); }
  .faq-section,
  .definition-section { width: min(calc(100% - 40px), 1060px); }
  .definition-section { gap: 34px; }
  .brands-static-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .interests-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .nav-container { width: calc(100% - 24px); }
  .nav-cta-link > span { display: none; }
  .nav-cta-link { width: 42px; padding: 0; gap: 0; }
  .nav-cta-link svg { padding: 0; border-left: 0; }
  .mega-brand-grid { grid-template-columns: 1fr; }
  .mega-brand { min-height: 104px; padding: 18px; }

  .container,
  section > .container,
  footer > .container { width: min(calc(100% - 28px), var(--cx-max)); }
  .faq-section,
  .definition-section { width: min(calc(100% - 28px), 1060px); }
  .section-title { font-size: clamp(30px,10vw,44px); }
  .definition-section { padding-top: 50px; grid-template-columns: 1fr; gap: 16px; }
  .faq-section { padding: 42px 0 60px; }
  .faq-question { min-height: 68px; padding: 21px 40px 21px 38px; font-size: 13px; }
  .faq-item::before { top: 23px; }
  .faq-answer { padding: 0 38px 22px; }
  .brands-static-strip { grid-template-columns: 1fr 1fr; }
  .brand-card { min-height: 116px; padding: 20px; }
  .brand-logo-img { max-width: 160px; max-height: 44px; }
  .interests-grid { grid-template-columns: 1fr; }
  .model-card-img,
  .ptz-img-frame { min-height: 220px; }
  .prod-img-wrap { min-height: 190px; }
}

@media (max-width: 460px) {
  .brands-static-strip { grid-template-columns: 1fr; }
  .brand-card { min-height: 100px; }
  .nav-container { width: calc(100% - 18px); }
  .site-logo-header { height: 29px; }
}

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

/* EIZO authored FAQ blocks use the same editorial language without changing schema content. */
.faq-editorial-section {
  padding: 64px 0 82px;
  background: var(--cx-bg);
  border-top: 1px solid var(--cx-line);
}
.faq-editorial-section .faq-header {
  margin: 0 auto 30px;
  text-align: center;
}
.faq-editorial-list {
  max-width: 1060px;
  margin: 0 auto;
  display: block;
  border-top: 1px solid var(--cx-line-strong);
}
.faq-editorial-section .faq-item {
  position: relative;
  padding: 24px 0 24px 56px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cx-line);
  border-radius: 0;
  box-shadow: none;
}
.faq-editorial-section .faq-item::before {
  content: attr(data-faq-index);
  position: absolute;
  left: 0;
  top: 27px;
  color: var(--cx-green);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
}
.faq-editorial-question {
  margin: 0 0 8px;
  color: var(--cx-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 680;
  line-height: 1.5;
  letter-spacing: -.015em;
}
.faq-editorial-answer {
  margin: 0;
  color: var(--cx-copy);
  font-size: 13.5px;
  line-height: 1.75;
}
.faq-editorial-answer a { color: var(--cx-green-2); }

/* Contact and enquiry shells use the available desktop width without oversized empty bands. */
.contact-grid-new,
.contact-grid-eizo,
.contact-split,
.contact-support-grid {
  gap: clamp(30px,4vw,64px);
}
.contact-redesigned,
.contact-section,
.contact-eizo,
.form-section,
.sol-form-section { border-top: 1px solid var(--cx-line); }

/* Remove chip-inside-card styling where older page CSS still creates it. */
.prod-feature-tag,
.contact-chip,
.wf-compat-chip {
  border-radius: 3px;
  box-shadow: none;
}

/* Prevent old page CSS from making cards jump like generated templates. */
.premium-ui .commerce-card:hover,
.premium-ui .solution-card:hover,
.premium-ui .support-card:hover,
.premium-ui .trust-card:hover,
.premium-ui .eco-card:hover,
.premium-ui .arch-card:hover,
.premium-ui .model-card:hover,
.premium-ui .ptz-cat-card:hover { transform: none !important; }

/* Hero eyebrow badges are typography, not pills. */
.hero-pill {
  width: auto;
  max-width: max-content;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #d7e2dc;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--cx-green);
  box-shadow: none;
}
.hero-headline,
.hero-title,
.ptz-hero-title {
  letter-spacing: -.055em;
  text-wrap: balance;
}
.hero-sub {
  max-width: 690px;
  color: #b2bdb6;
  line-height: 1.7;
}

/* Support editorial header is intentionally centered. */
.page-support #why-support .section-header {
  max-width: 840px;
  margin-inline: auto;
  text-align: center;
}
.page-support #why-support .section-tag { justify-content: center; }
.page-support #why-support .section-desc {
  max-width: 700px;
  margin: 16px auto 0;
}

/* Avoid chip-like metadata boxes in workflow and value sections. */
.wf-compat-chip,
.prod-feature-tag,
.contact-chip {
  padding: 6px 0;
  color: var(--cx-copy);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.wf-compat-brands,
.prod-features,
.contact-chips { gap: 14px 20px; }


/* ========================================================================== 
   CAMIXEL POLISH PASS 2026
   Corrects heading alignment, dark product presentation, form proportions,
   card geometry, CTA hierarchy and section spacing without changing content.
   ========================================================================== */

:root {
  --cx-content: 1380px;
  --cx-copy-wide: 760px;
  --cx-section-space: clamp(64px, 6vw, 96px);
  --cx-section-space-sm: clamp(48px, 4.5vw, 72px);
  --cx-card: #0b1811;
  --cx-card-2: #0f1d15;
  --cx-card-3: #14241b;
  --cx-product-stage: #15231b;
  --cx-product-stage-2: #1a2b21;
  --cx-field: #07120c;
  --cx-field-hover: #0a1710;
  --cx-soft-line: rgba(227, 241, 232, .11);
  --cx-soft-line-2: rgba(227, 241, 232, .18);
  --cx-radius-card: 12px;
  --cx-radius-control: 8px;
}

/* ---------- layout rhythm ---------- */
.container,
section > .container,
footer > .container {
  width: min(calc(100% - clamp(32px, 5vw, 72px)), var(--cx-content));
  max-width: var(--cx-content);
}

.more-than-tech-section,
.ptz-spotlight-section,
.brands-section,
.about-redesigned,
.industries-redesigned,
.contact-redesigned,
.who-section,
.timeline-section,
.about-vm-section,
.core-values-section,
.industries-section,
.trust-section,
.eco-section,
.workflow-section,
.support-section,
.bm-contact,
.eizo-brand-section,
.cat-tabs-section,
.prod-section,
.val-section,
.team-section,
.eizo-contact,
.why-ptz-section,
.camixel-value-section,
.crossbrand-section,
.shift-section,
.ecosystem-section,
.arch-section,
.compare-section,
.advantage-section,
.lead-section,
.solutions-section,
.sol-form-section,
.warranty-section,
.form-section,
.contact-support-section,
.closer-section,
.events-section,
.ewaste-content-section {
  padding-top: var(--cx-section-space);
  padding-bottom: var(--cx-section-space);
}

/* Prevent accidental giant gaps where one padded section follows another. */
.definition-section { padding-top: var(--cx-section-space-sm); }
.faq-section { padding-top: var(--cx-section-space-sm); }

/* ---------- headings ---------- */
body.premium-ui h1,
body.premium-ui h2,
body.premium-ui h3,
body.premium-ui h4 {
  text-wrap: pretty;
}

.section-header {
  width: 100%;
  max-width: 820px;
  margin: 0 0 clamp(30px, 3vw, 44px);
  text-align: left;
}
.section-header.text-center,
.text-center.section-header {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-title {
  max-width: 800px;
  margin: 10px 0 0;
  font-size: clamp(30px, 3.15vw, 48px);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-align: inherit;
}
.section-header.text-center .section-title,
.text-center.section-header .section-title {
  margin-left: auto;
  margin-right: auto;
}
.section-sub,
.section-desc {
  max-width: var(--cx-copy-wide);
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.72;
  text-align: inherit;
}
.section-header.text-center .section-sub,
.section-header.text-center .section-desc,
.text-center.section-header .section-sub,
.text-center.section-header .section-desc {
  margin-left: auto;
  margin-right: auto;
}

/* Keep bespoke page H2s in the same visual family and stop awkward oversized wrapping. */
.who-text h2,
.ewaste-text h2,
.contact-banner h2,
.eizo-logo-text h2,
.prod-intro-text h2,
.contact-info-eizo h2,
.shift-text h2,
.detail-content h2,
.lead-info h2,
.final-cta h2,
.closer-section h2,
.contact-left h2,
.cta-text h2,
.contact-info h2,
.featured-content h2,
.about-content h2 {
  max-width: 760px;
  margin-top: 0;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -.04em;
}

/* ---------- buttons and CTA hierarchy ---------- */
.btn,
.btn-primary,
.btn-primary-sm,
.btn-ghost,
.btn-outline-sm,
.btn-lg,
.cat-cta,
.model-card-link,
.nav-cta-link {
  border-radius: var(--cx-radius-control);
}
.btn {
  min-height: 46px;
  padding: 0 19px;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 720;
  letter-spacing: -.01em;
}
.btn-lg { min-height: 50px; padding-inline: 23px; }
.btn-primary,
.btn-primary-sm,
.nav-cta-link {
  background: var(--cx-green);
  border-color: var(--cx-green);
  color: #041109;
}
.btn-primary:hover,
.btn-primary-sm:hover,
.nav-cta-link:hover,
.btn-primary:focus-visible,
.btn-primary-sm:focus-visible,
.nav-cta-link:focus-visible {
  background: #74d6aa;
  border-color: #74d6aa;
  color: #021008;
  box-shadow: 0 8px 22px rgba(98,201,156,.14);
}
.btn-ghost,
.btn-outline-sm {
  color: #e5ece8;
  background: rgba(255,255,255,.018);
  border-color: var(--cx-soft-line-2);
}
.btn-ghost:hover,
.btn-outline-sm:hover,
.btn-ghost:focus-visible,
.btn-outline-sm:focus-visible {
  background: rgba(255,255,255,.055);
  border-color: rgba(98,201,156,.46);
  color: #fff;
}
.hero-actions,
.sol-hero-actions,
.final-cta-btns,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- cards / boxes ---------- */
.commerce-card,
.value-card,
.i-card,
.why-card,
.solution-card,
.eco-card,
.vm-card,
.trust-card,
.office-card,
.event-card,
.news-card,
.service-card,
.support-card {
  border-radius: var(--cx-radius-card);
}

.value-card,
.i-card,
.why-card,
.solution-card,
.eco-card,
.vm-card,
.trust-card,
.office-card,
.service-card,
.support-card {
  background: var(--cx-card);
  border: 1px solid var(--cx-soft-line);
  box-shadow: none;
}
.value-card:hover,
.i-card:hover,
.why-card:hover,
.solution-card:hover,
.eco-card:hover,
.vm-card:hover,
.trust-card:hover,
.office-card:hover,
.service-card:hover,
.support-card:hover {
  background: var(--cx-card-2);
  border-color: rgba(98,201,156,.30);
  transform: none;
  box-shadow: 0 16px 38px rgba(0,0,0,.12);
}

/* ---------- dark commerce catalogue ---------- */
.commerce-zone {
  background: #07120c;
  color: var(--cx-text);
  border-top: 1px solid var(--cx-soft-line);
  border-bottom: 1px solid var(--cx-soft-line);
}
.commerce-zone .section-title,
.commerce-zone h2,
.commerce-zone h3,
.commerce-zone h4 { color: var(--cx-text); }
.commerce-zone .section-sub,
.commerce-zone .section-desc,
.commerce-zone p { color: var(--cx-copy); }

.cat-products-grid,
.models-grid,
.ptz-categories-grid {
  gap: clamp(16px, 1.7vw, 24px);
}
.commerce-card {
  background: #0b1811;
  border: 1px solid var(--cx-soft-line);
  color: var(--cx-text);
  overflow: hidden;
}
.commerce-card:hover,
.commerce-card:focus-within {
  background: #0e1c14;
  border-color: rgba(98,201,156,.34);
  box-shadow: 0 16px 36px rgba(0,0,0,.16);
}

/* Product stages remain dark, but lighter than the page so black hardware is still legible. */
.prod-img-wrap,
.model-card-img,
.ptz-img-frame {
  min-height: 235px;
  padding: clamp(22px, 2.2vw, 32px);
  background:
    radial-gradient(circle at 50% 38%, rgba(79,111,91,.34), transparent 46%),
    linear-gradient(180deg, var(--cx-product-stage-2), var(--cx-product-stage));
  border-bottom: 1px solid var(--cx-soft-line);
}
.prod-img-wrap img,
.model-card-img img,
.ptz-img-frame img {
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.28));
}
.product-card h4 {
  padding: 18px 18px 8px;
  color: #f2f6f3;
  font-size: 14px;
}
.product-card::after {
  content: "View product  ↗";
  padding: 5px 18px 18px;
  color: #8ca097;
}
.model-card-body { padding: 20px 20px 8px; }
.model-card-body h3,
.model-card-body h4,
.ptz-cat-card h3,
.eco-card h3 { color: #f0f5f2; }
.model-card-body p,
.ptz-cat-card p,
.eco-card p { color: #9cacA3; }
.model-specs { border-top-color: var(--cx-soft-line); }
.model-spec { color: #bdc9c1; }
.model-card-link,
.ptz-cat-card > .btn,
.commerce-card .btn-outline-sm {
  color: #e9f0ec;
  background: rgba(255,255,255,.018);
  border-color: var(--cx-soft-line-2);
}
.model-card-link:hover,
.ptz-cat-card > .btn:hover,
.commerce-card .btn-outline-sm:hover {
  color: #fff;
  background: rgba(98,201,156,.08);
  border-color: rgba(98,201,156,.45);
}
.model-card-badge {
  color: #d9f7e9;
  background: rgba(98,201,156,.14);
  border-color: rgba(98,201,156,.24);
  border-radius: 5px;
}

/* Product navigation stays dark and visually attached to the catalogue. */
.page-blackmagic .cat-tabs,
.page-eizo .lineup-toolbar,
.page-eizo-medical .filter-bar,
.page-eizo-medical .filters-wrap {
  background: rgba(7,18,12,.97);
  border-bottom: 1px solid var(--cx-soft-line);
}
.page-blackmagic .cat-tab,
.page-eizo .lineup-filter-btn { color: #8e9d94; }
.page-blackmagic .cat-tab:hover,
.page-blackmagic .cat-tab.active,
.page-eizo .lineup-filter-btn.active-filter,
.page-eizo .lineup-filter-btn:hover {
  color: #f5f8f6;
  border-color: var(--cx-green);
}
.page-eizo .lineup-search input {
  color: #eaf0ec;
  background: #09150f;
  border-color: var(--cx-soft-line-2);
}

/* ---------- forms ---------- */
.contact-form-new,
.contact-form-eizo,
.lead-form-wrap,
.contact-form-wrap,
.form-wrap,
.sol-form-container,
.experience-form-shell {
  width: 100%;
  padding: clamp(24px, 2.8vw, 36px);
  background: #0a1710;
  border: 1px solid var(--cx-soft-line-2);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(0,0,0,.12);
}

/* Do not let simple enquiry forms become giant full-width slabs. */
.page-blackmagic .contact-form-wrap,
.page-eizo .contact-form-eizo,
.page-eizo-medical .contact-form-eizo,
.page-sennheiser .lead-form-wrap,
.page-careers .contact-form-new,
.page-events .experience-form-shell {
  max-width: 900px;
}
.page-careers .contact-form-new,
.page-events .experience-form-shell { margin-left: auto; margin-right: auto; }
.page-support .form-wrap,
.page-solutions .sol-form-container { max-width: 1120px; margin-left: auto; margin-right: auto; }

.form-title-new,
.contact-form-wrap > h3,
.lead-form-wrap > h3 {
  margin: 0 0 26px;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.cx-form label,
.form-group-new label,
.form-grp label,
.form-group label,
.form-label {
  margin-bottom: 7px;
  color: #c8d3cc;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
}

.cx-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cx-form select,
.cx-form textarea,
.form-group-new input:not([type="checkbox"]):not([type="radio"]),
.form-group-new select,
.form-group-new textarea,
.form-grp input,
.form-grp select,
.form-grp textarea,
.form-group input,
.form-group select,
.form-group textarea {
  min-height: 48px;
  padding: 11px 13px;
  color: #edf3ef;
  background: var(--cx-field);
  border: 1px solid var(--cx-soft-line-2);
  border-radius: var(--cx-radius-control);
  font-size: 13.5px;
}
.cx-form textarea,
.form-group-new textarea,
.form-grp textarea,
.form-group textarea { min-height: 112px; }
.cx-form input:focus,
.cx-form select:focus,
.cx-form textarea:focus,
.form-group-new input:focus,
.form-group-new select:focus,
.form-group-new textarea:focus,
.form-grp input:focus,
.form-grp select:focus,
.form-grp textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: var(--cx-field-hover);
  border-color: rgba(98,201,156,.62);
  box-shadow: 0 0 0 3px rgba(98,201,156,.07);
}

.form-row-new,
.form-row,
.frow,
.frow2,
.form-grid-2,
.ux-form-row {
  gap: 18px;
}
.form-section-group,
.form-block {
  padding: 26px 0;
}
.form-section-title,
.form-block-title {
  margin: 0 0 18px;
  color: #eef4f0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.form-section-title::before,
.form-block-title::before {
  content: "";
  width: 3px;
  height: 15px;
  margin-right: 9px;
  display: inline-block;
  vertical-align: -2px;
  background: var(--cx-green);
  border-radius: 2px;
}
.form-sublabel { margin-bottom: 14px; font-size: 13px; }

/* Spacious but compact choice controls. */
.interests-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.checkbox-container,
.radio-opt {
  min-height: 48px;
  padding: 11px 13px;
  background: #08140d;
  border: 1px solid var(--cx-soft-line);
  border-radius: 8px;
  font-size: 12px;
}
.checkbox-container:hover,
.radio-opt:hover {
  background: #0b1911;
  border-color: rgba(98,201,156,.38);
}
.checkbox-container:has(input:checked),
.radio-opt:has(input:checked) {
  background: rgba(98,201,156,.09);
  border-color: rgba(98,201,156,.55);
}
.form-submit-wrap,
.form-submit-row {
  margin-top: 4px;
  padding-top: 24px;
}
.form-submit-wrap .btn,
.form-submit-row .btn,
.cx-form button[type="submit"] {
  min-height: 50px;
  padding-inline: 24px;
}

/* ---------- FAQ and content rows ---------- */
.faq-section {
  width: min(calc(100% - clamp(32px,5vw,72px)), 1120px);
  max-width: 1120px;
}
.faq-header { max-width: 760px; margin-bottom: 30px; }
.faq-list { border-top: 1px solid var(--cx-soft-line-2); }
.faq-item { border-bottom: 1px solid var(--cx-soft-line); }
.faq-question {
  min-height: 72px;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 14.5px;
}
.faq-answer { font-size: 14px; line-height: 1.72; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .section-title { font-size: clamp(30px, 5vw, 44px); }
  .interests-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cat-products-grid,
  .models-grid,
  .ptz-categories-grid { gap: 16px; }
}

@media (max-width: 720px) {
  :root { --cx-section-space: 58px; --cx-section-space-sm: 44px; }
  .container,
  section > .container,
  footer > .container { width: min(calc(100% - 32px), var(--cx-content)); }
  .section-header,
  .section-header.text-center,
  .text-center.section-header { margin-bottom: 28px; }
  .section-title { font-size: clamp(28px, 9.5vw, 39px); line-height: 1.08; }
  .section-sub,
  .section-desc { font-size: 14px; }
  .hero-actions,
  .sol-hero-actions,
  .final-cta-btns,
  .cta-actions { gap: 10px; margin-top: 22px; }
  .hero-actions .btn,
  .sol-hero-actions .btn,
  .final-cta-btns .btn { width: 100%; }
  .interests-grid { grid-template-columns: 1fr; }
  .contact-form-new,
  .contact-form-eizo,
  .lead-form-wrap,
  .contact-form-wrap,
  .form-wrap,
  .sol-form-container,
  .experience-form-shell { padding: 22px 17px; }
  .prod-img-wrap,
  .model-card-img,
  .ptz-img-frame { min-height: 210px; padding: 20px; }
}

/* Event enquiry rows added during the UX pass use the same measured form grid. */
.ux-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin: 0;
}
.ux-form-group { min-width: 0; }
@media (max-width: 720px) {
  .ux-form-row { grid-template-columns: 1fr; }
}

/* EIZO medical editorial sections use the same spacing rhythm as the rest of the site. */
.medical-promo,
.sol-pitch,
.page-eizo-medical .team-section {
  padding-top: var(--cx-section-space);
  padding-bottom: var(--cx-section-space);
}

/* Specs read as information, not tiny nested boxes. */
.model-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 14px 0 18px;
  padding-top: 13px;
  border-top: 1px solid var(--cx-soft-line);
}
.model-spec {
  position: relative;
  padding: 0 0 0 11px;
  color: #aebbb3;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  line-height: 1.5;
}
.model-spec::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cx-green);
}
.model-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 2px;
}
.model-card-link,
.model-spec-link {
  font-size: 12px;
  font-weight: 680;
  text-decoration: none;
}
.model-card-link { color: var(--cx-green); }
.model-spec-link { color: #87968d; }
.model-card-link:hover,
.model-spec-link:hover { color: #fff; }

/* Form sizing guardrail: controls stay inside their grid columns at every width. */
.cx-form *,
.contact-form-new *,
.contact-form-eizo *,
.lead-form-wrap *,
.contact-form-wrap *,
.form-wrap *,
.sol-form-container *,
.experience-form-shell * {
  box-sizing: border-box;
}
.form-group-new,
.form-grp,
.form-group,
.ux-form-group { min-width: 0; width: 100%; }

/* Secondary button aliases used by older page templates share the same system. */
.btn-outline,
.submit-btn-new,
.event-popup-cta {
  min-height: 46px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--cx-radius-control);
  font: inherit;
  font-size: 12.5px;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transform: none;
}
.btn-outline {
  color: #e7eee9;
  background: rgba(255,255,255,.018);
  border: 1px solid var(--cx-soft-line-2);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.05);
  border-color: rgba(98,201,156,.45);
}
.submit-btn-new,
.event-popup-cta {
  color: #041109;
  background: var(--cx-green);
  border: 1px solid var(--cx-green);
}
.submit-btn-new:hover,
.event-popup-cta:hover { background: #74d6aa; border-color: #74d6aa; }

/* ========================================================================
   RENDERED QA PASS - 2026-08-31
   Final alignment, cursor, product, form and CTA corrections based on
   desktop/mobile browser previews. This block intentionally owns the final
   shared visual decisions across every page.
   ======================================================================== */

:root {
  --cx-max: 1320px;
  --cx-header: 72px;
  --cx-section-y: clamp(72px, 7vw, 104px);
  --cx-section-y-sm: clamp(52px, 5vw, 76px);
  --cx-card: #0b1711;
  --cx-card-2: #0e1c15;
  --cx-stage: #0a120e;
  --cx-stage-2: #101a14;
  --cx-border: rgba(211, 232, 219, .13);
  --cx-border-hover: rgba(98, 201, 156, .48);
}

/* predictable mouse feedback */
body.premium-ui { cursor: default; }
a,
button,
summary,
select,
[role="button"],
.nav-link,
.nav-cta-link,
.product-card,
.model-card-link,
.commerce-card,
.checkbox-container,
.radio-opt,
.custom-checkbox,
.filter-btn,
.cat-tab,
.cat-tab-btn,
.hamburger { cursor: pointer; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="number"],
textarea { cursor: text; }
button:disabled,
input:disabled,
select:disabled { cursor: not-allowed; }

/* overall alignment */
.container,
section > .container,
footer > .container,
.nav-container,
.mega-shell {
  width: min(calc(100% - 64px), var(--cx-max));
  max-width: var(--cx-max);
  margin-inline: auto;
}

body.premium-ui h1,
body.premium-ui h2,
body.premium-ui h3,
body.premium-ui h4,
body.premium-ui h5,
body.premium-ui h6 {
  text-wrap: pretty;
  letter-spacing: -.032em;
}

body.premium-ui h2,
body.premium-ui .section-title {
  margin-left: 0;
  margin-right: 0;
  max-width: 860px;
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1.08;
  text-align: left;
}

.section-header {
  width: 100%;
  max-width: 860px;
  margin: 0 0 36px;
  text-align: left;
}
.section-header.text-center,
.text-center.section-header,
.faq-header {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-header.text-center .section-title,
.text-center.section-header .section-title,
.faq-header .section-title,
.section-header.text-center h2,
.text-center.section-header h2,
.faq-header h2 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-desc,
.section-sub {
  max-width: 720px;
  margin-top: 15px;
  margin-left: 0;
  margin-right: 0;
  font-size: 15px;
  line-height: 1.72;
}
.section-header.text-center .section-desc,
.section-header.text-center .section-sub,
.text-center.section-header .section-desc,
.text-center.section-header .section-sub,
.faq-header .section-desc,
.faq-header .section-sub {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* consistent section spacing, without blank bands */
body.premium-ui main > section:not(.hero):not(.hero-slider):not(.brand-hero):not(.support-hero),
body.premium-ui .eco-section,
body.premium-ui .form-section,
body.premium-ui .faq-section,
body.premium-ui .brands-section,
body.premium-ui .solutions-section {
  padding-top: var(--cx-section-y);
  padding-bottom: var(--cx-section-y);
}

/* NAV: centered, crisp and unambiguous */
.nav-header,
.nav-header.scrolled {
  height: var(--cx-header);
  background: #06100b;
  border-bottom: 1px solid var(--cx-border);
}
.nav-container {
  height: var(--cx-header);
  grid-template-columns: 190px minmax(0, 1fr) 190px;
  gap: 18px;
}
.nav-links {
  width: 100%;
  justify-content: center;
  gap: clamp(18px, 2vw, 30px);
}
.nav-link {
  min-height: var(--cx-header);
  font-size: 13.5px;
  font-weight: 600;
  color: #c3cec7;
}
.nav-cta-link {
  min-height: 42px;
  padding: 0 14px 0 17px;
  border-radius: 7px;
}

/* BUTTONS / CTA: same system everywhere */
.btn,
.btn-primary,
.btn-primary-sm,
.btn-ghost,
.btn-outline-sm,
.btn-lg,
.cat-cta,
.model-card-link {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.btn-lg { min-height: 48px; padding-inline: 22px; }
.hero-actions,
.sol-hero-actions,
.cta-actions,
.final-cta-btns,
.model-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 26px;
}
.hero-actions .btn,
.sol-hero-actions .btn,
.cta-actions .btn,
.final-cta-btns .btn,
.model-actions .btn { width: auto; }
.cat-info .cat-cta {
  margin-top: 22px;
  width: max-content;
}

/* one clean card language */
.commerce-card,
.solution-card,
.trust-card,
.support-card,
.cv-card,
.cb-card,
.why-ptz-card,
.arch-card,
.val-card,
.team-card,
.news-card,
.event-card,
.contact-form-new,
.contact-form-eizo,
.lead-form-wrap,
.form-wrap,
.sol-form-container {
  border-radius: 12px;
  border-color: var(--cx-border);
}
.commerce-card {
  background: var(--cx-card);
  overflow: hidden;
}
.commerce-card:hover,
.commerce-card:focus-within {
  background: var(--cx-card-2);
  border-color: var(--cx-border-hover);
}

/* PRODUCTS: dark visual stages, larger cards, better use of width */
.cat-hero-grid {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: 34px;
}
.cat-products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.prod-img-wrap,
.model-card-img,
.ptz-img-frame {
  background:
    radial-gradient(circle at 50% 42%, rgba(98,201,156,.10), transparent 48%),
    linear-gradient(180deg, var(--cx-stage-2), var(--cx-stage));
  border-bottom: 1px solid var(--cx-border);
}
.prod-img-wrap {
  min-height: 190px;
  aspect-ratio: 4 / 3;
  padding: 22px;
}
.prod-img-wrap img,
.model-card-img img,
.ptz-img-frame img {
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.28));
}
.product-card h4 {
  padding: 16px 16px 6px;
  font-size: 13.5px;
}
.product-card::after {
  content: "View product  ↗";
  padding: 4px 16px 16px;
  color: #829188;
}
.models-grid,
.ptz-categories-grid {
  gap: 18px;
}
.model-card-img,
.ptz-img-frame {
  min-height: 220px;
  padding: 24px;
}
.model-card-badge {
  top: 12px;
  left: 12px;
  color: #a9dfc4;
  background: rgba(98,201,156,.10);
  border-color: rgba(98,201,156,.22);
}
.model-card-body { padding: 18px 18px 8px; }
.model-card-link { margin: 12px 18px 18px; }

/* FORMS: compact, proportional, elegant */
.contact-form-new,
.contact-form-eizo,
.lead-form-wrap,
.form-wrap,
.sol-form-container {
  width: min(100%, 1040px);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(24px, 3vw, 36px);
  background: #09150f;
}
.form-section .section-header { margin-bottom: 28px; }
.form-row-new,
.form-row,
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}
.form-group-new,
.form-grp,
.form-group { margin-bottom: 0; }
.cx-form label,
.form-group-new label,
.form-grp label,
.form-group label,
.form-label {
  margin-bottom: 6px;
  color: #bcc8c1;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .015em;
  text-transform: none;
}
.cx-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cx-form select,
.cx-form textarea,
.form-group-new input:not([type="checkbox"]):not([type="radio"]),
.form-group-new select,
.form-group-new textarea,
.form-grp input,
.form-grp select,
.form-grp textarea,
.form-group input,
.form-group select,
.form-group textarea {
  min-height: 46px;
  padding: 10px 13px;
  background: #07110c;
  border-color: rgba(211,232,219,.16);
  border-radius: 7px;
  font-size: 13px;
}
.cx-form textarea,
.form-group-new textarea,
.form-grp textarea,
.form-group textarea { min-height: 112px; }
.form-section-group,
.form-block {
  padding: 24px 0;
}
.form-section-group + .form-section-group,
.form-block + .form-block { margin-top: 4px; }
.form-section-title,
.form-block-title {
  margin-bottom: 18px;
  font-size: 11px;
  letter-spacing: .08em;
}

/* checkbox/radio controls are controls, not another card grid */
.interests-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
}
.checkbox-container,
.radio-opt,
.custom-checkbox {
  min-height: 32px;
  padding: 4px 0;
  gap: 10px;
  color: #bdc8c1;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 550;
}
.checkbox-container:hover,
.radio-opt:hover,
.custom-checkbox:hover,
.checkbox-container:has(input:checked),
.radio-opt:has(input:checked) {
  color: #fff;
  background: transparent;
  border-color: transparent;
}
.checkbox-container input,
.radio-opt input,
.custom-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  display: grid;
  place-content: center;
  background: #07110c;
  border: 1px solid rgba(211,232,219,.28);
  border-radius: 4px;
  transition: border-color .14s ease, background .14s ease;
}
.radio-opt input[type="radio"] { border-radius: 50%; }
.checkbox-container input::before,
.custom-checkbox input::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #052015;
  border-bottom: 2px solid #052015;
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}
.checkbox-container input:checked,
.custom-checkbox input:checked,
.radio-opt input:checked {
  background: var(--cx-green);
  border-color: var(--cx-green);
}
.checkbox-container input:checked::before,
.custom-checkbox input:checked::before { transform: rotate(-45deg) scale(1); }
.radio-opt input[type="radio"]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #052015;
  transform: scale(0);
  transition: transform .12s ease;
}
.radio-opt input[type="radio"]:checked::before { transform: scale(1); }
.radio-group { gap: 12px 22px; }

/* form CTAs should never feel like giant banners */
.form-submit-wrap,
.form-submit-row {
  margin-top: 6px;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.form-submit-row p,
.form-submit-wrap p {
  max-width: 660px;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}
.form-submit-wrap .btn,
.form-submit-row .btn,
.cx-form button[type="submit"],
.contact-form-new button[type="submit"],
.contact-form-eizo button[type="submit"],
.lead-form-wrap button[type="submit"] {
  width: auto;
  min-width: 170px;
  flex: 0 0 auto;
}

/* Careers and simple single-column forms */
.page-careers .contact-form-wrap,
.page-careers .contact-form-new,
.page-careers #apply form { max-width: 920px; }
.page-careers #apply button[type="submit"] {
  display: flex;
  width: auto;
  min-width: 190px;
  margin: 24px 0 0 auto;
}

/* Support specifically: keep the long technical form readable */
.page-support .form-wrap {
  max-width: 1120px;
}
.page-support .form-grid-2,
.page-support .form-row { gap: 16px 20px; }
.page-support .form-block { padding: 26px 0; }
.page-support .radio-group { gap: 10px 22px; }

/* FAQ: alignment and typography */
.faq-section { max-width: 1080px; }
.faq-question {
  min-height: 72px;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 14.5px;
}
.faq-answer { font-size: 14px; }

/* Desktop breakpoints */
@media (max-width: 1180px) {
  .cat-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .interests-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .container,
  section > .container,
  footer > .container,
  .nav-container,
  .mega-shell { width: min(calc(100% - 36px), var(--cx-max)); }
  .nav-container { grid-template-columns: 1fr auto auto; }
  body.premium-ui h2,
  body.premium-ui .section-title { font-size: clamp(30px, 7vw, 42px); }
  .cat-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .cat-info { max-width: 680px; padding-right: 0; }
  .cat-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row-new,
  .form-row,
  .form-grid-2 { grid-template-columns: 1fr; }
  .interests-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-submit-wrap,
  .form-submit-row { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  :root { --cx-header: 68px; }
  .container,
  section > .container,
  footer > .container,
  .nav-container,
  .mega-shell { width: min(calc(100% - 28px), var(--cx-max)); }
  .site-logo-header { height: 28px; }
  .nav-cta-link { width: 42px; min-width: 42px; padding: 0; font-size: 0; }
  .nav-cta-link svg { padding: 0; border-left: 0; }
  .cat-products-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .prod-img-wrap { min-height: 150px; padding: 14px; }
  .product-card h4 { font-size: 12.5px; padding: 13px 13px 5px; }
  .product-card::after { padding: 3px 13px 13px; font-size: 9.5px; }
  .interests-grid { grid-template-columns: 1fr; gap: 8px; }
  .contact-form-new,
  .contact-form-eizo,
  .lead-form-wrap,
  .form-wrap,
  .sol-form-container { padding: 20px 16px; }
  .hero-actions,
  .sol-hero-actions,
  .cta-actions,
  .final-cta-btns,
  .model-actions { gap: 9px; }
  .hero-actions .btn,
  .sol-hero-actions .btn { flex: 1 1 auto; }
}

/* Final specificity corrections for legacy page-level CSS */
body.premium-ui .product-card .prod-img-wrap {
  width: 100%;
  height: auto;
  min-height: 190px;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(98,201,156,.12), transparent 48%),
    linear-gradient(180deg, #111d16 0%, #08110c 100%);
  border-bottom: 1px solid var(--cx-border);
}
body.premium-ui .product-card .prod-img-wrap img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 190px;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.30));
}
body.premium-ui .product-card:hover .prod-img-wrap img { transform: scale(1.025); }

body.premium-ui .model-card .model-card-img {
  height: auto;
  min-height: 220px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(98,201,156,.10), transparent 50%),
    linear-gradient(180deg, #111d16 0%, #08110c 100%);
  border-bottom: 1px solid var(--cx-border);
}
body.premium-ui .model-card .model-card-img img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  padding: 0;
  object-fit: contain;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.30));
}

body.premium-ui .ptz-cat-card .ptz-img-frame {
  min-height: 220px;
  background:
    radial-gradient(circle at 50% 42%, rgba(98,201,156,.10), transparent 50%),
    linear-gradient(180deg, #111d16 0%, #08110c 100%);
}

/* Contact/application headings: one centered hierarchy when the component is centered. */
.contact-header-new {
  width: min(100%, 760px);
  margin: 0 auto 34px;
  text-align: center;
}
.contact-header-new .section-tag { justify-content: center; }
.contact-header-new h2 {
  max-width: 760px;
  margin: 12px auto 0;
  text-align: center;
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1.08;
}
.contact-header-new p {
  max-width: 680px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.72;
}

/* Common field wrappers from older page CSS. */
body.premium-ui .fg,
body.premium-ui .form-group-new,
body.premium-ui .form-grp,
body.premium-ui .form-group { min-width: 0; }
body.premium-ui .fg label {
  display: block;
  margin-bottom: 6px;
  color: #bcc8c1;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .015em;
  text-transform: none;
}
body.premium-ui .fg input:not([type="checkbox"]):not([type="radio"]),
body.premium-ui .fg select,
body.premium-ui .fg textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  color: var(--cx-text);
  background: #07110c;
  border: 1px solid rgba(211,232,219,.16);
  border-radius: 7px;
  outline: 0;
  box-shadow: none;
  font: inherit;
  font-size: 13px;
}
body.premium-ui .fg textarea { min-height: 112px; resize: vertical; }
body.premium-ui .fg input:focus,
body.premium-ui .fg select:focus,
body.premium-ui .fg textarea:focus {
  border-color: rgba(98,201,156,.65);
  box-shadow: 0 0 0 3px rgba(98,201,156,.08);
}

/* Support radio controls use a compact native-like choice layout. */
body.premium-ui .page-support .radio-opt {
  min-height: 30px;
  padding: 2px 0;
  gap: 8px;
  line-height: 1.35;
}
body.premium-ui .page-support .radio-opt input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

/* Keep cards aligned to their grid instead of inherited translate effects. */
body.premium-ui .product-card,
body.premium-ui .model-card,
body.premium-ui .ptz-cat-card,
body.premium-ui .solution-card,
body.premium-ui .support-card,
body.premium-ui .trust-card {
  transform: none;
}

/* Ensure CTA bars have breathing room from the content above. */
body.premium-ui .form-submit-row,
body.premium-ui .form-submit-wrap { margin-top: 14px; }
body.premium-ui .form-submit-row .btn,
body.premium-ui .form-submit-wrap .btn { margin: 0; }

@media (max-width: 900px) {
  .contact-header-new h2 { font-size: clamp(30px, 7vw, 42px); }
  body.premium-ui .product-card .prod-img-wrap { min-height: 170px; padding: 18px; }
  body.premium-ui .product-card .prod-img-wrap img { max-height: 165px; }
}
@media (max-width: 560px) {
  .contact-header-new { margin-bottom: 26px; }
  .contact-header-new h2 { font-size: clamp(29px, 9vw, 38px); }
  body.premium-ui .product-card .prod-img-wrap { min-height: 145px; padding: 12px; }
  body.premium-ui .product-card .prod-img-wrap img { max-height: 135px; }
}

/* Support request: proper two-column service desk layout */
.page-support .support-request-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 38px;
  align-items: start;
}
.page-support .support-request-aside {
  padding: 8px 8px 0 0;
  position: sticky;
  top: calc(var(--cx-header) + 24px);
}
.page-support .support-request-aside h3 {
  margin: 14px 0 10px;
  font-size: 22px;
  line-height: 1.25;
}
.page-support .support-request-aside > p {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.7;
}
.page-support .support-aside-list {
  margin: 0 0 22px;
  border-top: 1px solid var(--cx-border);
}
.page-support .support-aside-list > div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--cx-border);
}
.page-support .support-aside-list strong {
  color: var(--cx-text);
  font-size: 16px;
  font-weight: 750;
}
.page-support .support-aside-list span {
  color: var(--cx-copy);
  font-size: 12.5px;
  line-height: 1.45;
}
.page-support .support-aside-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 0 0 20px;
  color: #aab8b0;
  font-size: 11px;
}
.page-support .support-aside-brands span + span::before {
  content: "/";
  margin-right: 14px;
  color: #496356;
}
.page-support .support-direct-link {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  color: var(--cx-copy);
  font-size: 12px;
  line-height: 1.5;
}
.page-support .support-direct-link span {
  color: var(--cx-green);
  font-weight: 700;
}
.page-support .support-request-layout .form-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Guided questionnaire heading and action alignment */
.sol-form-header {
  width: min(100%, 800px);
  margin: 0 auto 30px;
  text-align: center;
}
.sol-form-header .section-tag { justify-content: center; }
.sol-form-header h2 {
  max-width: 800px;
  margin: 12px auto 0;
  text-align: center;
  font-size: clamp(34px, 3.2vw, 48px);
  line-height: 1.08;
}
.sol-form-header p {
  max-width: 660px;
  margin: 15px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
}
.sol-builder-form .form-submit-wrap { justify-content: flex-end; }
.sol-builder-form .submit-btn-new {
  width: auto;
  min-width: 220px;
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--cx-black);
  background: var(--cx-green);
  border: 1px solid var(--cx-green);
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
}
.sol-builder-form .submit-btn-new:hover { background: var(--cx-green-2); border-color: var(--cx-green-2); }

/* EIZO medical: prevent legacy decorative checkmark from creating a second checkbox. */
.custom-checkbox .checkmark { display: none; }

/* Generic checkbox groups, including event enquiry form */
[data-required-checkbox-group] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin-top: 10px;
}
[data-required-checkbox-group] > label {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #bdc8c1;
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}
[data-required-checkbox-group] input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  display: grid;
  place-content: center;
  background: #07110c;
  border: 1px solid rgba(211,232,219,.28);
  border-radius: 4px;
}
[data-required-checkbox-group] input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #052015;
  border-bottom: 2px solid #052015;
  transform: rotate(-45deg) scale(0);
}
[data-required-checkbox-group] input[type="checkbox"]:checked {
  background: var(--cx-green);
  border-color: var(--cx-green);
}
[data-required-checkbox-group] input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }

@media (max-width: 980px) {
  .page-support .support-request-layout { grid-template-columns: 1fr; gap: 26px; }
  .page-support .support-request-aside { position: static; padding: 0; }
  .page-support .support-aside-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-support .support-aside-list > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; border-right: 1px solid var(--cx-border); }
  .page-support .support-aside-list > div:last-child { border-right: 0; }
}
@media (max-width: 620px) {
  .page-support .support-aside-list { grid-template-columns: 1fr; }
  .page-support .support-aside-list > div { grid-template-columns: 58px 1fr; border-right: 0; }
  [data-required-checkbox-group] { grid-template-columns: 1fr; }
  .sol-form-header h2 { font-size: clamp(29px, 9vw, 38px); }
}


/* FINAL ALIGNMENT + DENSITY PASS */

/* Keep text blocks and the actions that belong to them on one visual edge. */
.hero-sub,
.hero-copy p,
.cat-info .cat-desc,
.cta-text p,
.contact-header-new p,
.sol-form-header p {
  margin-bottom: 0;
}
.hero-actions,
.sol-hero-actions,
.final-cta-btns,
.cta-actions,
.model-actions {
  margin-top: 20px;
}
.cat-info .cat-desc {
  margin-bottom: 0;
  line-height: 1.7;
}
.cat-info .cat-cta {
  margin-top: 16px;
}

/* Compact, readable brand menu. It should assist navigation, not become a page. */
.mega-dropdown {
  left: 50%;
  right: auto;
  width: min(1080px, calc(100vw - 48px));
  transform: translate(-50%, -4px);
  background: #08130d;
  border: 1px solid rgba(211,232,219,.12);
  border-top: 1px solid rgba(211,232,219,.16);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 24px 50px rgba(0,0,0,.34);
}
.has-dropdown:hover > .mega-dropdown,
.has-dropdown:focus-within > .mega-dropdown,
.has-dropdown.brands-open > .mega-dropdown {
  transform: translate(-50%, 0);
}
.mega-shell {
  width: 100%;
  max-width: none;
  padding: 20px 22px;
  grid-template-columns: 245px minmax(0,1fr);
  gap: 26px;
}
.mega-intro {
  padding: 2px 24px 2px 0;
}
.mega-intro h2 {
  margin-top: 9px;
  max-width: 235px;
  font-size: 20px;
  line-height: 1.18;
}
.mega-intro p {
  margin: 9px 0 11px;
  max-width: 235px;
  font-size: 11.5px;
  line-height: 1.5;
}
.mega-all-link { font-size: 11.5px; }
.mega-brand-grid {
  align-self: stretch;
  border-top: 0;
  border-left: 0;
  gap: 0;
}
.mega-brand {
  min-height: 112px;
  padding: 15px 15px 14px;
  justify-content: center;
  gap: 12px;
  border-top: 1px solid var(--cx-line);
  border-right: 1px solid var(--cx-line);
  border-bottom: 1px solid var(--cx-line);
}
.mega-brand:first-child { border-left: 1px solid var(--cx-line); }
.mega-logo-stage { height: 34px; }
.mega-logo-stage img { max-width: 112px; max-height: 31px; }
.mega-brand-copy { gap: 2px; }
.mega-brand-copy strong { font-size: 12px; }
.mega-brand-copy small {
  max-width: 145px;
  font-size: 10px;
  line-height: 1.35;
}
.mega-arrow { top: 13px; right: 13px; font-size: 12px; }

/* Forms use an efficient desktop rhythm. Avoid tall stacked panels and dead gaps. */
.contact-form-new,
.contact-form-eizo,
.lead-form-wrap,
.form-wrap,
.sol-form-container {
  padding: 26px 28px;
}
body.premium-ui .fg,
body.premium-ui .form-group-new,
body.premium-ui .form-grp,
body.premium-ui .form-group {
  gap: 4px;
  margin-bottom: 10px;
}
.form-row-new,
.form-row,
.form-grid-2,
.frow2,
.frow3 {
  gap: 12px 16px;
}
body.premium-ui .fg input:not([type="checkbox"]):not([type="radio"]),
body.premium-ui .fg select,
body.premium-ui .form-group-new input:not([type="checkbox"]):not([type="radio"]),
body.premium-ui .form-group-new select,
body.premium-ui .form-grp input:not([type="checkbox"]):not([type="radio"]),
body.premium-ui .form-grp select,
body.premium-ui .form-group input:not([type="checkbox"]):not([type="radio"]),
body.premium-ui .form-group select {
  min-height: 42px;
  padding: 8px 12px;
}
body.premium-ui .fg textarea,
body.premium-ui .form-group-new textarea,
body.premium-ui .form-grp textarea,
body.premium-ui .form-group textarea {
  min-height: 88px;
  padding: 10px 12px;
}
.form-section-group,
.form-block {
  padding: 17px 0;
  margin: 0;
}
.form-section-group + .form-section-group,
.form-block + .form-block {
  margin-top: 0;
  border-top: 1px solid rgba(211,232,219,.09);
}
.form-section-title,
.form-block-title {
  margin-bottom: 13px;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 10.5px;
  letter-spacing: .075em;
}
.radio-group { gap: 7px 18px; }
.checkbox-container,
.radio-opt,
.custom-checkbox {
  min-height: 28px;
  padding: 2px 0;
}
.interests-grid {
  gap: 7px 18px;
}

/* The submit action follows the explanatory copy rather than floating on the opposite edge. */
.form-submit-row,
.form-submit-wrap {
  margin-top: 4px;
  padding-top: 18px;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}
.form-submit-row p,
.form-submit-wrap p {
  max-width: 720px;
  color: #87978e;
  font-size: 11.5px;
  line-height: 1.55;
}
.form-submit-row .btn,
.form-submit-wrap .btn,
.cx-form button[type="submit"],
.contact-form-new button[type="submit"],
.contact-form-eizo button[type="submit"],
.lead-form-wrap button[type="submit"] {
  min-width: 168px;
  margin: 0;
}

/* Careers: compact application block with the button on the same content edge. */
.page-careers .contact-form-new { max-width: 860px; }
.page-careers #career-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 11px 16px;
}
.page-careers #career-form > .form-row-new,
.page-careers #career-form > input[type="hidden"],
.page-careers #career-form > input[name="_honey"],
.page-careers #career-form > .form-group-new:has(#resume),
.page-careers #career-form > .form-group-new:has(#message),
.page-careers #career-form > button[type="submit"] {
  grid-column: 1 / -1;
}
.page-careers #career-form .form-row-new { gap: 16px; }
.page-careers #apply button[type="submit"] {
  margin: 5px 0 0;
  justify-self: start;
}

/* Support service desk: reduce vertical length while retaining scanability. */
.page-support .support-request-layout {
  grid-template-columns: minmax(240px, 290px) minmax(0,1fr);
  gap: 32px;
}
.page-support .support-request-aside { top: calc(var(--cx-header) + 18px); }
.page-support .support-request-aside h3 { margin: 11px 0 8px; font-size: 20px; }
.page-support .support-request-aside > p { margin-bottom: 16px; line-height: 1.6; }
.page-support .support-aside-list { margin-bottom: 16px; }
.page-support .support-aside-list > div { padding: 9px 0; }
.page-support .support-aside-brands { margin-bottom: 14px; }
.page-support .support-request-layout .form-wrap { padding: 22px 24px; }
.page-support .form-block { padding: 15px 0; }
.page-support .fg { margin-bottom: 8px; }
.page-support .fg textarea { min-height: 82px; }
.page-support .radio-group { gap: 6px 16px; }
.page-support .radio-opt { min-height: 26px; }

/* Solutions questionnaire: same information, much less scrolling. */
.page-solutions .sol-form-container {
  max-width: 1020px;
  padding: 24px 28px;
}
.sol-form-header { margin-bottom: 18px; }
.sol-form-header h2 {
  margin-top: 9px;
  font-size: clamp(30px, 2.8vw, 40px);
}
.sol-form-header p { margin-top: 9px; font-size: 13px; }
.sol-builder-form .form-section-group { padding: 15px 0; }
.sol-builder-form .form-grid-2 { gap: 11px 16px; }
.sol-builder-form .form-group-new { margin-bottom: 8px; }
.sol-builder-form .interests-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px 14px;
}
.sol-builder-form .form-sublabel { margin-bottom: 8px; }
.sol-builder-form .form-submit-wrap { padding-top: 14px; }
.sol-builder-form .submit-btn-new { min-height: 44px; min-width: 210px; }

/* Generic callout bands: copy and actions share a baseline and balanced space. */
.cta-inner {
  align-items: center;
  gap: 32px;
}
.cta-text p { margin-top: 10px; }
.cta-actions { margin-top: 0; justify-content: flex-end; }

@media (max-width: 1100px) {
  .mega-dropdown { width: min(930px, calc(100vw - 36px)); }
  .mega-shell { grid-template-columns: 210px minmax(0,1fr); gap: 18px; padding: 18px; }
  .mega-intro { padding-right: 18px; }
  .mega-brand { padding-inline: 12px; }
  .sol-builder-form .interests-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .mega-dropdown {
    position: static;
    width: 100%;
    transform: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .has-dropdown:hover > .mega-dropdown,
  .has-dropdown:focus-within > .mega-dropdown,
  .has-dropdown.brands-open > .mega-dropdown { transform: none; }
  .mega-shell {
    width: 100%;
    padding: 14px 0 8px;
    grid-template-columns: 1fr;
  }
  .mega-intro { display: none; }
  .mega-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mega-brand { min-height: 82px; }
  .page-support .support-request-layout { grid-template-columns: 1fr; }
  .page-support .support-request-aside { position: static; }
  .page-careers #career-form { grid-template-columns: 1fr; }
  .page-careers #career-form > * { grid-column: 1 !important; }
  .sol-builder-form .interests-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .contact-form-new,
  .contact-form-eizo,
  .lead-form-wrap,
  .form-wrap,
  .sol-form-container { padding: 18px 15px; }
  .mega-brand-grid { grid-template-columns: 1fr; }
  .sol-builder-form .interests-grid { grid-template-columns: 1fr; }
  .form-submit-row .btn,
  .form-submit-wrap .btn,
  .cx-form button[type="submit"] { width: 100%; }
}



/* Compact brand switcher: four destinations, no mini landing page inside navigation. */
@media (min-width: 901px) {
  .mega-dropdown { width: min(940px, calc(100vw - 48px)); }
  .mega-shell {
    display: block;
    padding: 14px;
  }
  .mega-intro { display: none; }
  .mega-brand-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
  .mega-brand {
    min-height: 92px;
    padding: 13px 15px;
    gap: 9px;
    justify-content: center;
  }
  .mega-logo-stage { height: 29px; }
  .mega-logo-stage img { max-height: 28px; max-width: 108px; }
  .mega-brand-copy strong { font-size: 11.5px; }
  .mega-brand-copy small { font-size: 9.5px; line-height: 1.3; }
}

/* Use horizontal space in the guided solution form instead of forcing extra vertical rows. */
.solution-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 11px 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(211,232,219,.09);
}
.solution-final-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 14px 16px;
  align-items: start;
  margin-top: 2px;
}
.solution-final-grid .form-group-new { margin-bottom: 0; }
.solution-final-grid textarea { min-height: 78px !important; }
@media (min-width: 1180px) {
  .sol-builder-form .interests-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .solution-spec-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .solution-final-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .solution-spec-grid { grid-template-columns: 1fr; }
}

/* ===== Source: site-core.css ===== */
/* Camixel shared component and catalogue layer. */

/* Bundled source: rebuild.css */
/* Camixel Rebuild 2026
   Premium technology UI system. Loaded last on every page.
   This file intentionally normalizes legacy page styling into one coherent system.
*/

:root {
  --cx-bg: #05070a;
  --cx-bg-soft: #090c10;
  --cx-surface: #0d1117;
  --cx-surface-2: #121821;
  --cx-surface-3: #18202a;
  --cx-line: rgba(255,255,255,.10);
  --cx-line-strong: rgba(255,255,255,.17);
  --cx-text: #f5f5f7;
  --cx-text-2: #c5c7cb;
  --cx-muted: #8f959d;
  --cx-accent: #62d7a7;
  --cx-accent-2: #83e2bc;
  --cx-accent-soft: rgba(98,215,167,.12);
  --cx-danger: #ff6b6b;
  --cx-container: 1280px;
  --cx-content: 920px;
  --cx-radius-lg: 24px;
  --cx-radius-md: 16px;
  --cx-radius-sm: 11px;
  --cx-shadow: 0 28px 70px rgba(0,0,0,.34);
  --cx-header: 72px;
  --cx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cx-bg); }
body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 75% -180px, rgba(98,215,167,.09), transparent 68%),
    var(--cx-bg);
  color: var(--cx-text);
  font-family: var(--cx-font) !important;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body, button, input, textarea, select { font-family: var(--cx-font) !important; }
body *:not(code):not(pre):not(kbd):not(samp) { font-family: var(--cx-font) !important; }
a { color: inherit; text-decoration: none; }
a, button, [role="button"], summary, select, input[type="checkbox"], input[type="radio"], label[for], .product-card, .model-card, .commerce-card, .cat-tab, .lineup-filter-btn, .sol-filter-btn { cursor: pointer !important; }
input:not([type="checkbox"]):not([type="radio"]), textarea { cursor: text; }
img { max-width: 100%; }
::selection { background: rgba(98,215,167,.28); color: #fff; }

/* ---------- layout rhythm ---------- */
.container,
.nav-container,
.hero-content,
.footer-container,
.mega-shell {
  width: min(calc(100% - 64px), var(--cx-container)) !important;
  max-width: var(--cx-container) !important;
  margin-inline: auto !important;
}
section:not(.hero):not(.hero-section):not(.page-404) {
  padding-top: clamp(72px, 7vw, 112px) !important;
  padding-bottom: clamp(72px, 7vw, 112px) !important;
}
section + section { border-top: 1px solid rgba(255,255,255,.045); }

/* ---------- typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cx-font) !important;
  color: var(--cx-text);
  margin-top: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(3rem, 6.5vw, 6.2rem) !important;
  line-height: .98 !important;
  letter-spacing: -.062em !important;
  font-weight: 700 !important;
}
h2,
.section-title,
.section-header .section-title {
  font-size: clamp(2.15rem, 4.3vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.048em !important;
  font-weight: 680 !important;
  margin: 0 0 18px !important;
  max-width: 980px;
}
h3 { font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.15; letter-spacing: -.025em; }
h4 { font-size: 1.05rem; line-height: 1.25; letter-spacing: -.015em; }
p { color: var(--cx-text-2); }
.section-header {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin-bottom: clamp(40px, 5vw, 64px) !important;
}
.section-header.text-center,
.text-center.section-header {
  margin-inline: auto !important;
  text-align: center !important;
}
.section-header.text-center .section-title,
.text-center .section-title { margin-inline: auto !important; }
.section-desc,
.section-sub,
.section-header p {
  max-width: 720px !important;
  color: var(--cx-muted) !important;
  font-size: clamp(1rem, 1.2vw, 1.16rem) !important;
  line-height: 1.65 !important;
  margin-top: 0 !important;
}
.section-header.text-center .section-desc,
.section-header.text-center .section-sub,
.text-center .section-desc,
.text-center .section-sub { margin-inline: auto !important; }
.section-tag,
.hero-pill,
.mega-kicker {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: var(--cx-accent) !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  font-weight: 720 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
  border-radius: 0 !important;
}
.section-tag::before,
.mega-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--cx-accent);
  opacity: .9;
}
.text-accent { color: var(--cx-accent) !important; }

/* ---------- premium header ---------- */
.nav-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  height: var(--cx-header) !important;
  padding: 0 !important;
  background: rgba(5,7,10,.80) !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  backdrop-filter: saturate(150%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(22px) !important;
  box-shadow: none !important;
}
.nav-header.scrolled { background: rgba(5,7,10,.93) !important; }
.nav-container {
  height: var(--cx-header) !important;
  display: grid !important;
  grid-template-columns: minmax(160px,1fr) auto minmax(160px,1fr) !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 0 !important;
}
.nav-logo { justify-self: start !important; display: inline-flex !important; align-items:center !important; }
.site-logo-header { width: 128px !important; height: auto !important; display:block !important; object-fit:contain !important; }
.nav-links {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 100% !important;
}
.nav-link,
.nav-brands-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  color: #b9bdc3 !important;
  font-size: .84rem !important;
  line-height: 1 !important;
  font-weight: 520 !important;
  letter-spacing: -.008em !important;
  border-radius: 9px !important;
  border: 0 !important;
  background: transparent !important;
  transition: color .18s ease, background .18s ease !important;
}
.nav-link:hover,
.nav-link.active,
.nav-brands-link:hover,
.nav-brands-link.active { color: #fff !important; background: rgba(255,255,255,.055) !important; }
.nav-link::after { display:none !important; }
.chevron { margin-left: 4px; opacity:.65; }
.nav-cta { justify-self: end !important; display:flex !important; }
.nav-cta-link {
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(98,215,167,.38) !important;
  border-radius: 10px !important;
  background: var(--cx-accent) !important;
  color: #04110c !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 26px rgba(98,215,167,.13) !important;
  transition: transform .18s ease, background .18s ease !important;
}
.nav-cta-link:hover { transform: translateY(-1px); background: var(--cx-accent-2) !important; }
.hamburger { display:none !important; background:transparent !important; border:0 !important; padding:8px !important; }
.hamburger span { display:block; width:22px; height:1.5px; margin:5px 0; background:#fff; }

/* compact brand portfolio */
.has-dropdown { position: relative !important; height:100% !important; display:flex !important; align-items:center !important; }
.mega-dropdown {
  position: absolute !important;
  top: calc(100% - 4px) !important;
  left: 50% !important;
  transform: translate(-50%, 10px) !important;
  width: min(720px, calc(100vw - 40px)) !important;
  padding: 10px !important;
  background: rgba(13,17,23,.98) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 18px !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.50) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}
.has-dropdown:hover .mega-dropdown,
.has-dropdown:focus-within .mega-dropdown,
.has-dropdown.brands-open .mega-dropdown {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate(-50%,0) !important;
}
.mega-shell { width:100% !important; max-width:none !important; margin:0 !important; display:block !important; }
.mega-intro { display:none !important; }
.mega-brand-grid { display:grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
.mega-brand {
  min-width:0 !important;
  display:grid !important;
  grid-template-columns: 100px 1fr 18px !important;
  align-items:center !important;
  gap:14px !important;
  min-height:92px !important;
  padding:14px !important;
  border:1px solid transparent !important;
  border-radius:13px !important;
  background:transparent !important;
  transition:background .18s ease,border-color .18s ease !important;
}
.mega-brand:hover { background:rgba(255,255,255,.045) !important; border-color:rgba(255,255,255,.08) !important; }
.mega-logo-stage {
  height:50px !important;
  width:100px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  background:#111821 !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.mega-logo-stage img { max-width:100% !important; max-height:31px !important; object-fit:contain !important; filter:none !important; opacity:1 !important; }
.mega-brand-copy { min-width:0 !important; }
.mega-brand-copy strong { display:block !important; color:#fff !important; font-size:.9rem !important; margin-bottom:4px !important; font-weight:650 !important; }
.mega-brand-copy small { display:block !important; color:#858b94 !important; font-size:.72rem !important; line-height:1.35 !important; }
.mega-arrow { color:#6f7781 !important; font-size:.95rem !important; }

/* ---------- hero ---------- */
.hero,
.hero-section {
  position:relative !important;
  min-height: min(780px, calc(100svh - var(--cx-header))) !important;
  overflow:hidden !important;
  border:0 !important;
}
.hero-content {
  position:relative !important;
  z-index:3 !important;
  min-height:inherit !important;
  display:flex !important;
  align-items:center !important;
  padding-top: clamp(72px, 9vw, 120px) !important;
  padding-bottom: clamp(72px, 9vw, 120px) !important;
}
.hero-content-slide,
.hero-copy,
.hero-text { max-width: 760px !important; }
.hero-headline { max-width: 760px !important; }
.hero-sub { max-width: 620px !important; color:#b4bac1 !important; font-size:clamp(1rem,1.5vw,1.23rem) !important; line-height:1.6 !important; }
.hero-overlay { background: linear-gradient(90deg, rgba(4,6,8,.90) 0%, rgba(4,6,8,.64) 43%, rgba(4,6,8,.18) 76%, rgba(4,6,8,.26) 100%) !important; }
.hero-mesh-glow,.hero-grid-overlay { opacity:.18 !important; }
.hero-actions,
.cta-row,
.section-actions,
.product-actions,
.model-actions,
.form-actions,
.form-submit-wrap {
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin-top:28px !important;
  width:auto !important;
}
.text-center .hero-actions,
.text-center .cta-row,
.text-center .section-actions { justify-content:center !important; }
.ptz-cta-banner .container {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}
.ptz-cta-banner .hero-actions {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  width:fit-content !important;
  max-width:100% !important;
  margin:0 auto !important;
}
.ptz-cta-banner .hero-actions .btn,
.ptz-cta-banner .hero-actions a {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.hero-actions .btn,
.cta-row .btn,
.section-actions .btn,
.product-actions .btn,
.model-actions .btn,
.form-actions .btn,
.form-submit-wrap .btn,
.hero-actions a,
.cta-row a,
.section-actions a,
.product-actions a,
.model-actions a,
.form-actions a,
.form-submit-wrap a {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:52px !important;
  padding: 0 22px !important;
  flex: 0 0 auto !important;
  text-align:center !important;
}

/* ---------- buttons ---------- */
.btn,
.btn-primary,
.btn-outline,
.btn-outline-sm,
.btn-ghost,
.submit-btn-new,
button[type="submit"] {
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:44px !important;
  width:auto !important;
  max-width:100% !important;
  padding:0 17px !important;
  border-radius:11px !important;
  font-size:.86rem !important;
  line-height:1 !important;
  font-weight:670 !important;
  letter-spacing:-.008em !important;
  text-transform:none !important;
  white-space:nowrap !important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease !important;
  box-shadow:none !important;
}
.btn-primary,
.submit-btn-new,
button[type="submit"] {
  background:var(--cx-accent) !important;
  border:1px solid var(--cx-accent) !important;
  color:#03100b !important;
}
.btn-primary:hover,
.submit-btn-new:hover,
button[type="submit"]:hover { transform:translateY(-1px); background:var(--cx-accent-2) !important; border-color:var(--cx-accent-2) !important; }
.btn-outline,.btn-outline-sm,.btn-ghost {
  color:#f4f5f7 !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
.btn-outline:hover,.btn-outline-sm:hover,.btn-ghost:hover { background:rgba(255,255,255,.075) !important; border-color:rgba(255,255,255,.25) !important; }

/* ---------- cards / surfaces ---------- */
.i-card,.value-card,.why-card,.trust-card,.support-card,.pillar-card,.warranty-card,
.social-hub-card,.gallery-card,.cv-card,.why-ptz-card,.eco-card,.detail-panel,
.solution-card,.color-card,.tl-card,.ws-card,
.cb-card,.val-card,.event-card,.news-card {
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)) !important;
  border:1px solid var(--cx-line) !important;
  border-radius:var(--cx-radius-md) !important;
  box-shadow:none !important;
  color:var(--cx-text) !important;
}
.i-card:hover,.value-card:hover,.why-card:hover,.trust-card:hover,.support-card:hover,
.pillar-card:hover,.social-hub-card:hover,.cv-card:hover,.why-ptz-card:hover,.eco-card:hover,
.cb-card:hover,.val-card:hover,.event-card:hover,.news-card:hover {
  border-color:rgba(255,255,255,.18) !important;
  transform:translateY(-2px) !important;
}
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) > h3,
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) > h4,
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) .card-title,
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) strong {
  color: var(--cx-text) !important;
}
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) p,
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) li,
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) .meta,
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) .copy {
  color: var(--cx-text-2) !important;
}
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) .btn,
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) a.btn,
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) .model-card-link {
  width: 100% !important;
  justify-content: center !important;
  margin-top: auto !important;
}
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) {
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:where(.cv-card,.cb-card,.why-ptz-card,.value-card,.val-card,.support-card,.trust-card,.event-card,.news-card,.solution-card,.ptz-cat-card,.commerce-card,.product-card,.model-card) > *:not(.btn):not(a):not(img):not(.prod-img-wrap):not(.model-card-img):not(.ptz-img-frame) {
  width: 100% !important;
}

/* ---------- product commerce ---------- */
.cat-products-grid,
.models-grid,
.product-grid,
.ptz-products-grid,
.flexscan-grid {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}
.product-card,.model-card,.commerce-card,
.ptz-cat-card,.solution-card,.cb-card,.cv-card,
.why-ptz-card,.value-card,.val-card,
.support-card,.trust-card,.event-card,.news-card {
  min-width:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  height:100% !important;
  padding:0 !important;
  background:#0c1016 !important;
  border:1px solid rgba(255,255,255,.095) !important;
  border-radius:18px !important;
  box-shadow:none !important;
  transform:none !important;
  transition:border-color .2s ease,transform .2s ease,background .2s ease !important;
}
.product-card:hover,.model-card:hover,.commerce-card:hover,
.ptz-cat-card:hover,.solution-card:hover,.cb-card:hover,
.cv-card:hover,.why-ptz-card:hover,.value-card:hover,
.val-card:hover,.support-card:hover,.trust-card:hover,
.event-card:hover,.news-card:hover {
  border-color:rgba(98,215,167,.34) !important;
  background:#0e131a !important;
  transform:translateY(-3px) !important;
}
.product-card > .btn,
.model-card-link,
.ptz-cat-card > .btn,
.commerce-card .btn,
.solution-card .btn,
.cb-card .btn,
.cv-card .btn,
.why-ptz-card .btn,
.value-card .btn,
.val-card .btn,
.support-card .btn,
.trust-card .btn,
.event-card .btn,
.news-card .btn {
  margin-top:auto !important;
}
.prod-img-wrap,.model-card-img,.ptz-img-frame,.product-image,.eco-icon {
  position:relative !important;
  width:100% !important;
  min-height:220px !important;
  aspect-ratio:1.35/1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:22px !important;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,255,255,.075),transparent 48%),
    linear-gradient(180deg,#151b23,#0f141b) !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.065) !important;
  border-radius:0 !important;
}
.prod-img-wrap img,.model-card-img img,.ptz-img-frame img,.product-image img {
  width:100% !important;
  height:100% !important;
  max-width:92% !important;
  max-height:190px !important;
  object-fit:contain !important;
  mix-blend-mode:normal !important;
  filter:drop-shadow(0 14px 25px rgba(0,0,0,.25));
}
.product-card > h4 {
  margin:0 !important;
  padding:17px 18px 19px !important;
  min-height:70px !important;
  display:flex !important;
  align-items:center !important;
  color:#f4f5f6 !important;
  font-size:.95rem !important;
  font-weight:620 !important;
}
.model-card-body,.eco-card > div:not(.eco-icon) { padding:18px !important; }
.model-card-badge,.prod-tag,.eco-badge,.vm-badge,.best-chip {
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:4px 8px !important;
  border-radius:6px !important;
  background:rgba(98,215,167,.09) !important;
  border:1px solid rgba(98,215,167,.18) !important;
  color:#99ebca !important;
  font-size:.66rem !important;
  letter-spacing:.03em !important;
}
.model-specs { display:grid !important; gap:0 !important; margin:14px 0 !important; border-top:1px solid rgba(255,255,255,.07) !important; }
.model-spec { padding:8px 0 !important; border-bottom:1px solid rgba(255,255,255,.06) !important; background:transparent !important; border-radius:0 !important; color:#9ca3ab !important; }
.model-actions { margin-top:auto !important; padding-top:12px !important; }
.cat-hero-grid { align-items:end !important; gap:42px !important; }
.cat-info { max-width:690px !important; }
.cat-desc { max-width:650px !important; margin-bottom:0 !important; color:var(--cx-muted) !important; }
.cat-cta { margin-top:24px !important; }
.cat-banner { overflow:hidden !important; border-radius:22px !important; border:1px solid rgba(255,255,255,.08) !important; }
.cat-tabs,.lineup-filters,.sol-filters {
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  padding:6px !important;
  background:#0b0f14 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:13px !important;
  width:max-content !important;
  max-width:100% !important;
}
.cat-tab,.lineup-filter-btn,.sol-filter-btn {
  min-height:38px !important;
  padding:0 12px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:#9298a1 !important;
  font-size:.78rem !important;
  font-weight:580 !important;
}
.cat-tab.active,.lineup-filter-btn.active,.sol-filter-btn.active { background:#171d25 !important; color:#fff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) !important; }

/* ---------- forms ---------- */
form { max-width:100%; }
.form-group-new,.form-group,.fg,.form-grp { min-width:0 !important; margin-bottom:0 !important; }
.frow2,.form-row,.solution-final-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; }
.frow3 { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; }
.solution-spec-grid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; }
label,
.form-sublabel { color:#b7bcc4 !important; font-size:.78rem !important; font-weight:610 !important; letter-spacing:.005em !important; }
.fg > label,.form-group-new > label,.form-group > label,.form-grp > label { display:block !important; margin:0 0 7px !important; }
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],input[type="date"],input[type="number"],
select,textarea {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:46px !important;
  padding:0 13px !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  background:#0a0e13 !important;
  color:#f3f5f6 !important;
  outline:none !important;
  box-shadow:none !important;
  font-size:.88rem !important;
  line-height:1.3 !important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease !important;
}
textarea { min-height:104px !important; height:auto !important; padding:12px 13px !important; resize:vertical !important; }
input::placeholder,textarea::placeholder { color:#626973 !important; }
input:focus,select:focus,textarea:focus {
  border-color:rgba(98,215,167,.72) !important;
  background:#0c1117 !important;
  box-shadow:0 0 0 3px rgba(98,215,167,.09) !important;
}
.form-block,.form-section-group {
  margin:0 !important;
  padding:25px 0 !important;
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.085) !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.form-block:first-child,.form-section-group:first-child { border-top:0 !important; padding-top:0 !important; }
.form-block-title,.form-section-title {
  margin:0 0 18px !important;
  color:#f3f5f6 !important;
  font-size:.84rem !important;
  line-height:1.2 !important;
  font-weight:690 !important;
  letter-spacing:.015em !important;
  text-transform:none !important;
}
.form-block .fg + .fg,.form-section-group .form-group-new + .form-group-new { margin-top:16px !important; }
.form-block .frow2 + .frow2,.form-block .frow2 + .frow3,.form-block .frow3 + .fg,.form-block .frow2 + .fg { margin-top:16px !important; }

/* radio and checkbox controls */
.radio-group {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:9px 12px !important;
  margin-top:4px !important;
}
.radio-opt,
.checkbox-container,
.custom-checkbox {
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  min-height:38px !important;
  width:auto !important;
  max-width:100% !important;
  padding:7px 10px !important;
  margin:0 !important;
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:9px !important;
  color:#b8bec6 !important;
  font-size:.79rem !important;
  font-weight:520 !important;
  line-height:1.3 !important;
  transition:background .16s ease,border-color .16s ease,color .16s ease !important;
}
.radio-opt:hover,.checkbox-container:hover,.custom-checkbox:hover { background:rgba(255,255,255,.035) !important; border-color:rgba(255,255,255,.08) !important; color:#fff !important; }
.radio-opt input[type="radio"],
.checkbox-container input[type="checkbox"],
.custom-checkbox input[type="checkbox"] {
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:0 0 18px !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  padding:0 !important;
  margin:0 !important;
  border:1.5px solid #69717b !important;
  background:#0b1016 !important;
  box-shadow:none !important;
  display:grid !important;
  place-items:center !important;
}
.radio-opt input[type="radio"] { border-radius:50% !important; }
.checkbox-container input[type="checkbox"],.custom-checkbox input[type="checkbox"] { border-radius:5px !important; }
.radio-opt input[type="radio"]::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  transform:scale(0);
  background:var(--cx-accent);
  transition:transform .14s ease;
}
.checkbox-container input[type="checkbox"]::before,
.custom-checkbox input[type="checkbox"]::before {
  content:"";
  width:9px;
  height:5px;
  border-left:2px solid #04120c;
  border-bottom:2px solid #04120c;
  transform:rotate(-45deg) scale(0);
  transition:transform .14s ease;
}
.radio-opt input[type="radio"]:checked,
.checkbox-container input[type="checkbox"]:checked,
.custom-checkbox input[type="checkbox"]:checked { border-color:var(--cx-accent) !important; }
.radio-opt input[type="radio"]:checked::before { transform:scale(1); }
.checkbox-container input[type="checkbox"]:checked,
.custom-checkbox input[type="checkbox"]:checked { background:var(--cx-accent) !important; }
.checkbox-container input[type="checkbox"]:checked::before,
.custom-checkbox input[type="checkbox"]:checked::before { transform:translateY(-1px) rotate(-45deg) scale(1); }
.radio-opt:has(input:checked),.checkbox-container:has(input:checked),.custom-checkbox:has(input:checked) {
  color:#effff8 !important;
  background:rgba(98,215,167,.065) !important;
  border-color:rgba(98,215,167,.17) !important;
}
.checkbox-label { border:0 !important; background:transparent !important; padding:0 !important; color:inherit !important; font:inherit !important; }
.checkmark { display:none !important; }
.interests-grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px 12px !important;
  margin-top:14px !important;
}
.interests-grid .checkbox-container { width:100% !important; }

/* page forms as one deliberate surface */
.support-form,.career-form,.solution-form,.contact-form,.contact-form-new,
#support-form,#career-form,#solution-form,#contact-form {
  padding: clamp(24px,3vw,36px) !important;
  background:rgba(10,14,19,.74) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:20px !important;
  box-shadow:0 22px 70px rgba(0,0,0,.18) !important;
}
.form-submit-wrap { margin-top:20px !important; padding-top:18px !important; border-top:1px solid rgba(255,255,255,.08) !important; }

/* ---------- support ---------- */
.support-form-layout { align-items:start !important; gap:40px !important; }
.warranty-card { overflow:hidden !important; }
.warranty-item { background:transparent !important; border:0 !important; border-top:1px solid rgba(255,255,255,.07) !important; border-radius:0 !important; }
.support-pill { background:rgba(255,255,255,.035) !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:8px !important; }

/* ---------- solutions ---------- */
.solution-card.compact {
  display:flex !important;
  flex-direction:column !important;
  padding:22px !important;
  border-radius:16px !important;
  min-height:100% !important;
  justify-content:space-between !important;
}
.solution-card.compact .card-body {
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  width:100% !important;
}
.sol-workflow-bar { margin-top:auto !important; background:rgba(255,255,255,.025) !important; border:1px solid rgba(255,255,255,.06) !important; border-radius:10px !important; }
.card-tag { background:transparent !important; border:0 !important; padding:0 !important; color:var(--cx-accent) !important; }

/* ---------- FAQ ---------- */
.faq-item {
  display:flex !important;
  flex-direction:column !important;
  background:rgba(255,255,255,.01) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.faq-question,.faq-editorial-question,
.faq-answer,.faq-editorial-answer {
  width:100% !important;
}
.faq-question,.faq-editorial-question {
  min-height:68px !important;
  padding:18px 20px 18px 20px !important;
  color:#eef1f3 !important;
  font-size:1rem !important;
  font-weight:600 !important;
  background:transparent !important;
}
.faq-answer,.faq-editorial-answer {
  padding:0 20px 22px !important;
  color:var(--cx-muted) !important;
  max-width:780px !important;
  background:rgba(255,255,255,.005) !important;
}
.faq-item[open] {
  background:rgba(255,255,255,.015) !important;
  border-color:rgba(98,215,167,.18) !important;
}
.faq-question::before,
.faq-question::after {
  right: 18px !important;
}

/* ---------- global premium cleanup: everything with repeated card/FAQ rules ---------- */
body.premium-ui :is(
  .faq-section,
  .faq-editorial-section,
  .eizo-faq-section,
  .definition-section
) {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
body.premium-ui :is(.faq-item,.faq-editorial-list > *) {
  display:flex !important;
  flex-direction:column !important;
  background:rgba(255,255,255,.01) !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  width:100% !important;
  max-width:100% !important;
}
body.premium-ui :is(.faq-question,.faq-editorial-question) {
  width:100% !important;
  min-height:62px !important;
  padding:22px 48px 22px 18px !important;
  color:#edf3ef !important;
  font-size:1.05rem !important;
  font-weight:650 !important;
  background:transparent !important;
  border:0 !important;
}
body.premium-ui :is(.faq-answer,.faq-editorial-answer) {
  width:100% !important;
  max-width:920px !important;
  padding:0 18px 22px !important;
  color:#b9bec4 !important;
  font-size:0.96rem !important;
  line-height:1.75 !important;
  background:transparent !important;
}
body.premium-ui .faq-list,
body.premium-ui .faq-editorial-list {
  width:100% !important;
  max-width:100% !important;
}
body.premium-ui .faq-item[open] {
  background:rgba(255,255,255,.015) !important;
  border-color:rgba(98,215,167,.18) !important;
}
body.premium-ui :is(
  .product-card,
  .commerce-card,
  .model-card,
  .ptz-cat-card,
  .solution-card,
  .event-card,
  .news-card,
  .value-card,
  .val-card,
  .support-card,
  .trust-card,
  .why-card,
  .why-ptz-card,
  .cv-card,
  .cb-card,
  .eco-card,
  .i-card,
  .pillar-card,
  .team-card,
  .arch-card
) {
  display:flex !important;
  flex-direction:column !important;
  min-height:100% !important;
  height:100% !important;
  text-align:left !important;
}
body.premium-ui :is(
  .product-card,
  .commerce-card,
  .model-card,
  .ptz-cat-card,
  .solution-card,
  .event-card,
  .news-card,
  .value-card,
  .val-card,
  .support-card,
  .trust-card,
  .why-card,
  .why-ptz-card,
  .cv-card,
  .cb-card,
  .eco-card,
  .i-card,
  .pillar-card,
  .team-card,
  .arch-card
) :is(h3,h4,p,li,span) {
  text-align:left !important;
}
body.premium-ui :is(
  .product-card,
  .commerce-card,
  .model-card,
  .ptz-cat-card,
  .solution-card,
  .event-card,
  .news-card,
  .value-card,
  .val-card,
  .support-card,
  .trust-card,
  .why-card,
  .why-ptz-card,
  .cv-card,
  .cb-card,
  .eco-card,
  .i-card,
  .pillar-card,
  .team-card,
  .arch-card
) :is(.btn,a.btn,.model-card-link) {
  margin-top:auto !important;
  width:100% !important;
  justify-content:center !important;
}
body.premium-ui :is(.hero-actions,.sol-hero-actions,.cta-actions,.final-cta-btns,.cta-inner .cta-actions) {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px !important;
  width:fit-content !important;
  max-width:100% !important;
  justify-content:center !important;
}
body.premium-ui .text-center :is(.hero-actions,.sol-hero-actions,.cta-actions,.final-cta-btns) {
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
}
body.premium-ui :is(.contact-left,.contact-info-eizo,.lead-info,.ptz-spotlight-content,.cta-text,.sol-form-header) :is(.hero-actions,.sol-hero-actions,.cta-actions,.final-cta-btns) {
  justify-content:flex-start !important;
}

/* ---------- footer ---------- */
.footer { background:#040609 !important; border-top:1px solid rgba(255,255,255,.08) !important; }

/* ---------- brand accents (subtle only) ---------- */
.page-blackmagic { --page-accent:#ff8b52; }
.page-eizo,.page-eizo-medical { --page-accent:#66bfff; }
.page-ptzoptics { --page-accent:#5d91ff; }
.page-sennheiser { --page-accent:#dfe4e8; }
.page-blackmagic .section-tag,.page-eizo .section-tag,.page-eizo-medical .section-tag,.page-ptzoptics .section-tag,.page-sennheiser .section-tag { color:var(--page-accent,var(--cx-accent)) !important; }
.page-blackmagic .section-tag::before,.page-eizo .section-tag::before,.page-eizo-medical .section-tag::before,.page-ptzoptics .section-tag::before,.page-sennheiser .section-tag::before { background:var(--page-accent,var(--cx-accent)) !important; }

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  .nav-container { grid-template-columns:1fr auto !important; }
  .nav-links {
    position:fixed !important;
    top:var(--cx-header) !important;
    left:0 !important;
    right:0 !important;
    height:auto !important;
    max-height:calc(100svh - var(--cx-header)) !important;
    overflow:auto !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:3px !important;
    padding:16px 24px 26px !important;
    background:rgba(7,10,14,.98) !important;
    border-bottom:1px solid rgba(255,255,255,.09) !important;
  }
  .nav-links.open { display:flex !important; }
  .nav-link,.nav-brands-link { justify-content:space-between !important; width:100% !important; min-height:46px !important; padding:0 8px !important; }
  .nav-cta { display:none !important; }
  .hamburger { display:block !important; justify-self:end !important; }
  .has-dropdown { height:auto !important; display:block !important; }
  .mega-dropdown {
    position:static !important;
    width:100% !important;
    transform:none !important;
    display:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    margin:4px 0 10px !important;
    box-shadow:none !important;
    background:#0c1117 !important;
  }
  .has-dropdown.brands-open .mega-dropdown { display:block !important; transform:none !important; }
  .has-dropdown:hover .mega-dropdown:not(:focus-within) { display:none !important; }
  .has-dropdown.brands-open:hover .mega-dropdown { display:block !important; }
  .cat-products-grid,.models-grid,.product-grid,.ptz-products-grid,.flexscan-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .solution-spec-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 820px) {
  :root { --cx-header:64px; }
  .container,.nav-container,.hero-content,.footer-container,.mega-shell { width:min(calc(100% - 36px),var(--cx-container)) !important; }
  section:not(.hero):not(.hero-section):not(.page-404) { padding-top:64px !important; padding-bottom:64px !important; }
  .site-logo-header { width:100px !important; }
  .mega-brand-grid { grid-template-columns:1fr !important; }
  .mega-brand { min-height:74px !important; grid-template-columns:66px 1fr 18px !important; padding:10px !important; }
  .mega-logo-stage { width:66px !important; height:46px !important; }
  .hero,.hero-section { min-height:640px !important; }
  .hero-content { align-items:flex-end !important; padding-bottom:72px !important; }
  h1 { font-size:clamp(2.7rem,12vw,4.6rem) !important; }
  h2,.section-title,.section-header .section-title { font-size:clamp(2rem,8vw,3.2rem) !important; }
  .cat-products-grid,.models-grid,.product-grid,.ptz-products-grid,.flexscan-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .frow2,.frow3,.form-row,.solution-final-grid,.solution-spec-grid { grid-template-columns:1fr !important; }
  .interests-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .radio-group { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .radio-opt { width:100% !important; }
  .support-form-layout { grid-template-columns:1fr !important; gap:28px !important; }
}

@media (max-width: 520px) {
  .container,.nav-container,.hero-content,.footer-container,.mega-shell { width:min(calc(100% - 28px),var(--cx-container)) !important; }
  .cat-products-grid,.models-grid,.product-grid,.ptz-products-grid,.flexscan-grid { grid-template-columns:1fr !important; }
  .interests-grid,.radio-group { grid-template-columns:1fr !important; }
  .hero-actions,.cta-row,.section-actions,.product-actions,.model-actions,.form-actions,.form-submit-wrap { align-items:stretch !important; }
  .hero-actions .btn,.cta-row .btn,.form-submit-wrap button,.submit-btn-new { width:100% !important; }
  .support-form,.career-form,.solution-form,.contact-form,.contact-form-new,#support-form,#career-form,#solution-form,#contact-form { padding:20px !important; border-radius:16px !important; }
}

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

/* ---------- page hero corrections after rendered QA ---------- */
.hero-scroll-hint { display:none !important; }

.page-blackmagic .hero-content,
.page-support .hero-content {
  display:block !important;
  width:min(calc(100% - 64px),var(--cx-container)) !important;
  max-width:var(--cx-container) !important;
  margin-inline:auto !important;
  text-align:left !important;
}
.page-blackmagic .hero-headline {
  max-width:820px !important;
  font-size:clamp(3.5rem,6vw,5.8rem) !important;
  line-height:.93 !important;
}
.page-blackmagic .hero-headline .hero-line { display:block !important; }
.page-blackmagic .hero-sub { max-width:680px !important; margin:24px 0 0 !important; }
.page-blackmagic .hero-actions { margin-top:28px !important; justify-content:flex-start !important; }

.page-support .hero-pill { margin-bottom:20px !important; }
.page-support .hero-headline {
  max-width:800px !important;
  margin:0 !important;
  font-size:clamp(3rem,5.3vw,5rem) !important;
  line-height:.96 !important;
  letter-spacing:-.055em !important;
}
.page-support .hero-headline .hero-line:first-child {
  display:block !important;
  margin-bottom:16px !important;
  font-size:.22em !important;
  line-height:1.25 !important;
  letter-spacing:.14em !important;
  color:var(--cx-accent) !important;
}
.page-support .hero-headline .hero-line-accent { display:block !important; color:#f5f5f7 !important; }
.page-support .hero-sub {
  max-width:700px !important;
  margin:26px 0 0 !important;
  color:#aeb4bc !important;
  font-size:1.06rem !important;
  line-height:1.65 !important;
}
.page-support .support-brands-strip {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px 18px !important;
  margin-top:24px !important;
  opacity:1 !important;
  animation:none !important;
}
.page-support .support-pill {
  padding:0 !important;
  min-height:24px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#858d96 !important;
  font-size:.72rem !important;
  letter-spacing:0 !important;
}
.page-support .support-pill .dot { width:5px !important; height:5px !important; }
.page-support .hero-actions { margin-top:28px !important; justify-content:flex-start !important; }

.sol-hero {
  min-height:500px !important;
  padding:100px 0 !important;
  display:flex !important;
  align-items:center !important;
  text-align:left !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.sol-hero-content {
  width:min(calc(100% - 64px),var(--cx-container)) !important;
  max-width:var(--cx-container) !important;
  margin-inline:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr) !important;
  align-items:end !important;
  gap:72px !important;
}
.sol-hero-heading,.sol-hero-copy { min-width:0 !important; }
.sol-hero-kicker {
  display:block !important;
  margin-bottom:18px !important;
  color:var(--cx-accent) !important;
  font-size:.74rem !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
.sol-hero h1 {
  max-width:720px !important;
  margin:0 !important;
  font-size:clamp(3.4rem,6vw,5.9rem) !important;
  line-height:.94 !important;
  letter-spacing:-.06em !important;
  font-weight:700 !important;
}
.sol-hero-copy p {
  margin:0 !important;
  max-width:560px !important;
  color:#aeb4bc !important;
  font-size:1.06rem !important;
  line-height:1.65 !important;
}
.sol-brand-line {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px 16px !important;
  margin-top:18px !important;
  color:#747c85 !important;
  font-size:.73rem !important;
}
.sol-brand-line span { position:relative !important; }
.sol-brand-line span:not(:last-child)::after {
  content:"";
  display:inline-block;
  width:3px;
  height:3px;
  margin-left:16px;
  vertical-align:middle;
  border-radius:50%;
  background:#525a63;
}
.sol-hero-actions {
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  gap:12px !important;
  margin-top:26px !important;
}

/* Forms are compact application surfaces, not long stacks of nested cards. */
.cx-form {
  width:min(100%,980px) !important;
  margin-inline:auto !important;
  padding:clamp(24px,3vw,34px) !important;
  background:#0a0e13 !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:20px !important;
  box-shadow:0 28px 80px rgba(0,0,0,.20) !important;
}
.form-wrap.cx-form { max-width:980px !important; }
.sol-builder-form.cx-form { max-width:1080px !important; }
.cx-form .form-block,.cx-form .form-section-group { padding:22px 0 !important; }
.cx-form .form-block-title,.cx-form .form-section-title { margin-bottom:15px !important; }
.cx-form .fg > label,.cx-form .form-group-new > label,.cx-form .form-group > label,.cx-form .form-grp > label { margin-bottom:6px !important; }
.cx-form input[type="text"],.cx-form input[type="email"],.cx-form input[type="tel"],.cx-form input[type="url"],.cx-form input[type="date"],.cx-form input[type="number"],.cx-form select { min-height:44px !important; }
.cx-form textarea { min-height:92px !important; }
.cx-form .radio-group { gap:6px 10px !important; }
.cx-form .radio-opt,.cx-form .checkbox-container,.cx-form .custom-checkbox { min-height:34px !important; padding:5px 8px !important; }
.cx-form .interests-grid { gap:4px 10px !important; }
.cx-form .form-submit-wrap { margin-top:12px !important; padding-top:18px !important; }

@media (max-width:820px) {
  .page-blackmagic .hero-content,.page-support .hero-content { width:min(calc(100% - 36px),var(--cx-container)) !important; }
  .page-blackmagic .hero-headline,.page-support .hero-headline { font-size:clamp(2.65rem,12vw,4rem) !important; }
  .page-support .support-brands-strip { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px 14px !important; }
  .sol-hero { min-height:auto !important; padding:78px 0 !important; }
  .sol-hero-content { width:min(calc(100% - 36px),var(--cx-container)) !important; grid-template-columns:1fr !important; gap:28px !important; }
  .sol-hero h1 { font-size:clamp(2.8rem,13vw,4.3rem) !important; }
}

/* Content must never depend on decorative entrance animation to be readable. */
.hero-content-slide.active,
.hero-content-slide.active *,
.page-blackmagic .hero-line,
.page-blackmagic .hero-sub,
.page-blackmagic .hero-actions,
.page-support .hero-line,
.page-support .hero-sub,
.page-support .hero-actions,
.page-index .hero-line,
.page-index .hero-sub,
.page-index .hero-actions,
.reveal.visible {
  opacity:1 !important;
  transform:none !important;
}
.page-blackmagic .hero-line,
.page-blackmagic .hero-sub,
.page-blackmagic .hero-actions,
.page-support .hero-line,
.page-support .hero-sub,
.page-support .hero-actions,
.page-index .hero-line,
.page-index .hero-sub,
.page-index .hero-actions { animation:none !important; }

/* Remaining brand heroes use one deliberate vertical content stack. */
.page-eizo .hero-content,
.page-sennheiser .hero-content {
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  text-align:left !important;
}
.page-eizo .hero-headline,
.page-sennheiser .hero-headline {
  max-width:820px !important;
  margin:0 !important;
  font-size:clamp(3.4rem,6vw,5.7rem) !important;
  line-height:.94 !important;
}
.page-eizo .hero-headline .hero-line,
.page-sennheiser .hero-headline .hero-line { display:block !important; }
.page-eizo .hero-sub,
.page-sennheiser .hero-sub { max-width:690px !important; margin:24px 0 0 !important; }
.page-eizo .hero-actions,
.page-sennheiser .hero-actions { margin-top:28px !important; justify-content:flex-start !important; }
.page-sennheiser .wave-viz { margin:0 0 18px !important; }
.page-sennheiser .hero-content > p[style] { opacity:1 !important; animation:none !important; margin:16px 0 0 !important; color:#99a2aa !important; font-style:normal !important; }

.page-eizo-medical .hero-content {
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
}
.page-eizo-medical .hero-headline { max-width:860px !important; margin:0 auto !important; font-size:clamp(3.2rem,5.7vw,5.4rem) !important; }
.page-eizo-medical .hero-sub { max-width:700px !important; margin:24px auto 0 !important; }
.page-eizo-medical .hero-actions { justify-content:center !important; margin-top:28px !important; }

.page-eizo .hero-line,.page-eizo .hero-sub,.page-eizo .hero-actions,
.page-eizo-medical .hero-line,.page-eizo-medical .hero-sub,.page-eizo-medical .hero-actions,
.page-sennheiser .hero-line,.page-sennheiser .hero-sub,.page-sennheiser .hero-actions,
.ptz-hero .reveal,.ewaste-hero .reveal {
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

.ewaste-hero {
  min-height:620px !important;
  display:flex !important;
  align-items:center !important;
  padding:90px 0 !important;
}
.ewaste-hero .hero-headline { max-width:820px !important; font-size:clamp(3.4rem,6vw,5.7rem) !important; line-height:.94 !important; margin:0 0 24px !important; }
.ewaste-hero .hero-line { display:block !important; }
.ewaste-hero .hero-sub { margin:0 !important; max-width:680px !important; }

/* Solution form action sits on the same edge as its content on desktop. */
.sol-builder-form .form-submit-wrap { justify-content:flex-start !important; align-items:flex-start !important; }
.sol-builder-form .submit-btn-new { margin:0 !important; }

@media (max-width:820px) {
  .page-eizo .hero-headline,.page-sennheiser .hero-headline,.page-eizo-medical .hero-headline,.ewaste-hero .hero-headline { font-size:clamp(2.55rem,11.5vw,4rem) !important; }
  .page-eizo-medical .hero-content { align-items:flex-start !important; text-align:left !important; }
  .page-eizo-medical .hero-headline,.page-eizo-medical .hero-sub { margin-left:0 !important; margin-right:0 !important; }
  .page-eizo-medical .hero-actions { justify-content:flex-start !important; }
}
.ewaste-hero .hero-line { color:#f5f5f7 !important; }
.ewaste-hero .hero-line-accent { color:var(--cx-accent) !important; }


/* Final production logo visibility safeguards */
.brand-logo-img {
  max-width: 210px !important;
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}
.brand-card { background: #070b10 !important; }
.brand-card:hover { background: #0b1117 !important; }
.site-logo-footer { width: 148px !important; height: auto !important; object-fit: contain !important; opacity: 1 !important; }
@media (max-width: 820px) {
  .site-logo-header { width: 116px !important; }
  .mega-brand { grid-template-columns: 88px 1fr 18px !important; }
  .mega-logo-stage { width: 88px !important; height: 44px !important; }
}

/* ==========================================================================\n   FINAL TYPOGRAPHY + ALIGNMENT + FORM SYSTEM\n   2026-09-01: definitive last-layer rules for consistent section alignment.\n   ========================================================================== */

body.premium-ui {
  --cx-section-copy: 760px;
  --cx-form-copy: 680px;
  --cx-field-h: 46px;
}

/* Base headings are content headings. Only .section-title receives display scale. */
body.premium-ui h2 {
  max-width: none !important;
  margin: 0 0 16px !important;
  font-size: clamp(1.95rem, 2.65vw, 2.8rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-weight: 680 !important;
  text-align: inherit !important;
}
body.premium-ui .section-title,
body.premium-ui .section-header .section-title,
body.premium-ui .events-section-header h2 {
  max-width: 820px !important;
  margin: 0 0 18px !important;
  font-size: clamp(2.45rem, 4.15vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.048em !important;
  font-weight: 690 !important;
}

/* One predictable section-heading edge. */
body.premium-ui .section-header,
body.premium-ui .events-section-header {
  width: min(100%, 860px) !important;
  max-width: 860px !important;
  margin: 0 auto clamp(34px, 4vw, 54px) 0 !important;
  text-align: left !important;
}
body.premium-ui .section-header .section-title,
body.premium-ui .events-section-header h2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
body.premium-ui .section-header p,
body.premium-ui .events-section-header p,
body.premium-ui .section-header .section-desc,
body.premium-ui .section-header .section-sub {
  width: min(100%, var(--cx-section-copy)) !important;
  max-width: var(--cx-section-copy) !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Explicitly centered sections stay fully centered: kicker, title and paragraph. */
body.premium-ui .section-header.text-center,
body.premium-ui .text-center.section-header,
body.premium-ui .faq-header {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
body.premium-ui .section-header.text-center .section-title,
body.premium-ui .text-center.section-header .section-title,
body.premium-ui .faq-header .section-title {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
body.premium-ui .section-header.text-center p,
body.premium-ui .text-center.section-header p,
body.premium-ui .faq-header p,
body.premium-ui .section-header.text-center .section-desc,
body.premium-ui .section-header.text-center .section-sub {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
body.premium-ui .text-center > h1,
body.premium-ui .text-center > h2,
body.premium-ui .text-center > h3,
body.premium-ui .text-center > p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Split/editorial blocks use a smaller heading scale and a single left edge. */
body.premium-ui :is(
  .about-vm-box,
  .about-left,
  .ptz-spotlight-content,
  .contact-left,
  .contact-info-eizo,
  .prod-intro-text,
  .pitch-content,
  .detail-content,
  .shift-text,
  .lead-info,
  .ewaste-text,
  .cta-text,
  .sol-form-header
) {
  text-align: left !important;
}
body.premium-ui :is(
  .about-vm-box,
  .about-left,
  .ptz-spotlight-content,
  .contact-left,
  .contact-info-eizo,
  .prod-intro-text,
  .pitch-content,
  .detail-content,
  .shift-text,
  .lead-info,
  .ewaste-text,
  .cta-text,
  .sol-form-header
) > h2,
body.premium-ui .pitch-content > .section-title {
  max-width: 720px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
body.premium-ui :is(
  .about-vm-box,
  .about-left,
  .ptz-spotlight-content,
  .contact-left,
  .contact-info-eizo,
  .prod-intro-text,
  .pitch-content,
  .detail-content,
  .shift-text,
  .lead-info,
  .ewaste-text,
  .cta-text,
  .sol-form-header
) > p {
  max-width: 680px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Brand lockups are not section headings. */
body.premium-ui .eizo-logo-text h2 {
  margin: 0 0 5px !important;
  font-size: clamp(1.35rem, 1.8vw, 1.75rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}
body.premium-ui .eizo-logo-text p { margin: 0 !important; }

/* Definition headings are compact editorial headings. */
body.premium-ui .definition-title {
  max-width: 780px !important;
  font-size: clamp(1.85rem, 2.7vw, 2.7rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
}

/* Contact/application headers sit on the same axis as the form below. */
body.premium-ui .contact-header-new {
  width: min(100%, 900px) !important;
  margin: 0 auto 30px !important;
  text-align: left !important;
}
body.premium-ui .contact-header-new h2,
body.premium-ui .contact-header-new p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
body.premium-ui .contact-header-new p { max-width: 680px !important; }

/* Product/catalogue copy is consistently left-aligned; image stages remain centered. */
body.premium-ui :is(.product-card,.model-card,.commerce-card,.eco-card,.solution-card,.support-card,.value-card,.why-card) {
  text-align: left !important;
}
body.premium-ui :is(.product-card,.model-card,.commerce-card) :is(h3,h4,p) {
  text-align: left !important;
}
body.premium-ui :is(.product-image,.model-card-img,.product-media,.commerce-media) {
  text-align: center !important;
}

/* CTA groups always share the copy edge they belong to. */
body.premium-ui :is(.hero-actions,.cta-row,.section-actions,.product-actions,.model-actions) {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
  align-items: center !important;
}
body.premium-ui .text-center :is(.hero-actions,.cta-row,.section-actions) {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}
body.premium-ui :is(.contact-left,.contact-info-eizo,.lead-info,.ptz-spotlight-content,.cta-text) :is(.hero-actions,.cta-row,.section-actions) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
}

/* ---------- FORM FOUNDATION ---------- */
body.premium-ui .cx-form,
body.premium-ui form.cx-form,
body.premium-ui .form-wrap.cx-form {
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 3vw, 34px) !important;
  text-align: left !important;
  background: #0a0e13 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.20) !important;
}
body.page-solutions .sol-builder-form.cx-form { width: min(100%, 1080px) !important; max-width:1080px !important; }
body.page-support .form-wrap.cx-form { width:100% !important; max-width:none !important; }

body.premium-ui .cx-form :is(.form-group-new,.form-group,.fg,.form-grp) {
  display: grid !important;
  align-content: start !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

body.premium-ui .cx-form :is(.form-row-new,.form-row,.form-grid-2,.frow,.frow2) {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  align-items: start !important;
  gap: 16px !important;
  margin: 0 0 16px !important;
}
body.premium-ui .cx-form :is(.frow3) {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:start !important;
  gap:16px !important;
  margin:0 0 16px !important;
}
body.premium-ui .cx-form > :is(.form-group-new,.form-group,.fg,.form-grp) { margin-bottom:16px !important; }
body.premium-ui .cx-form > :is(.form-row-new,.form-row,.form-grid-2,.frow,.frow2,.frow3):last-of-type { margin-bottom:16px !important; }

body.premium-ui .cx-form label,
body.premium-ui .cx-form .form-sublabel {
  display:block !important;
  margin:0 !important;
  color:#c8cdd3 !important;
  font-size:.79rem !important;
  line-height:1.35 !important;
  font-weight:620 !important;
  letter-spacing:0 !important;
  text-align:left !important;
  text-transform:none !important;
}

body.premium-ui .cx-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.premium-ui .cx-form select,
body.premium-ui .cx-form textarea {
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:var(--cx-field-h) !important;
  min-height:var(--cx-field-h) !important;
  margin:0 !important;
  padding:0 13px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:9px !important;
  background:#0e1319 !important;
  color:#f5f6f7 !important;
  box-shadow:none !important;
  font-size:.89rem !important;
  line-height:1.35 !important;
  text-align:left !important;
}
body.premium-ui .cx-form textarea {
  height:auto !important;
  min-height:96px !important;
  padding:11px 13px !important;
  resize:vertical !important;
}
body.premium-ui .cx-form input::placeholder,
body.premium-ui .cx-form textarea::placeholder { color:#68717b !important; opacity:1 !important; }
body.premium-ui .cx-form input:focus,
body.premium-ui .cx-form select:focus,
body.premium-ui .cx-form textarea:focus {
  border-color:rgba(98,215,167,.72) !important;
  background:#10161d !important;
  box-shadow:0 0 0 3px rgba(98,215,167,.09) !important;
}

/* Form sections use whitespace and a single divider rather than nested boxes. */
body.premium-ui .cx-form :is(.form-block,.form-section-group) {
  margin:0 !important;
  padding:22px 0 !important;
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.09) !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-align:left !important;
}
body.premium-ui .cx-form :is(.form-block,.form-section-group):first-of-type {
  padding-top:0 !important;
  border-top:0 !important;
}
body.premium-ui .cx-form :is(.form-block-title,.form-section-title) {
  max-width:none !important;
  margin:0 0 16px !important;
  color:#f5f6f7 !important;
  font-size:.91rem !important;
  line-height:1.3 !important;
  font-weight:680 !important;
  letter-spacing:-.005em !important;
  text-align:left !important;
}
body.premium-ui .cx-form .form-block > :is(.frow2,.frow3,.fg) + :is(.frow2,.frow3,.fg),
body.premium-ui .cx-form .form-section-group > :is(.form-grid-2,.form-group-new) + :is(.form-grid-2,.form-group-new) {
  margin-top:16px !important;
}

/* Radios and checkboxes: real controls, no decorative outer boxes. */
body.premium-ui .cx-form .radio-group {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important;
  gap:0 20px !important;
  margin:4px 0 0 !important;
  padding:0 !important;
}
body.premium-ui .cx-form :is(.radio-opt,.checkbox-container,.custom-checkbox) {
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:40px !important;
  margin:0 !important;
  padding:9px 0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.065) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#b7bec6 !important;
  font-size:.8rem !important;
  line-height:1.35 !important;
  font-weight:520 !important;
  text-align:left !important;
  box-shadow:none !important;
}
body.premium-ui .cx-form :is(.radio-opt,.checkbox-container,.custom-checkbox):hover {
  background:transparent !important;
  border-color:rgba(255,255,255,.11) !important;
  color:#f3f5f6 !important;
}
body.premium-ui .cx-form :is(.radio-opt,.checkbox-container,.custom-checkbox):has(input:checked) {
  background:transparent !important;
  border-color:rgba(98,215,167,.20) !important;
  color:#f5fff9 !important;
}
body.premium-ui .cx-form .radio-opt input[type="radio"],
body.premium-ui .cx-form .checkbox-container input[type="checkbox"],
body.premium-ui .cx-form .custom-checkbox input[type="checkbox"] {
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:0 0 18px !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  margin:0 !important;
  padding:0 !important;
  border:1.5px solid #66707a !important;
  background:#080c11 !important;
  box-shadow:none !important;
  display:grid !important;
  place-items:center !important;
}
body.premium-ui .cx-form .radio-opt input[type="radio"] { border-radius:50% !important; }
body.premium-ui .cx-form :is(.checkbox-container,.custom-checkbox) input[type="checkbox"] { border-radius:4px !important; }
body.premium-ui .cx-form .radio-opt input[type="radio"]::before {
  content:"" !important;
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:var(--cx-accent) !important;
  transform:scale(0) !important;
  transition:transform .14s ease !important;
}
body.premium-ui .cx-form .radio-opt input[type="radio"]:checked::before { transform:scale(1) !important; }
body.premium-ui .cx-form :is(.checkbox-container,.custom-checkbox) input[type="checkbox"]::before {
  content:"" !important;
  width:8px !important;
  height:4px !important;
  border-left:2px solid #05110c !important;
  border-bottom:2px solid #05110c !important;
  transform:translateY(-1px) rotate(-45deg) scale(0) !important;
  transition:transform .14s ease !important;
}
body.premium-ui .cx-form :is(.checkbox-container,.custom-checkbox) input[type="checkbox"]:checked {
  background:var(--cx-accent) !important;
  border-color:var(--cx-accent) !important;
}
body.premium-ui .cx-form :is(.checkbox-container,.custom-checkbox) input[type="checkbox"]:checked::before {
  transform:translateY(-1px) rotate(-45deg) scale(1) !important;
}
body.premium-ui .cx-form .radio-opt input[type="radio"]:checked { border-color:var(--cx-accent) !important; }
body.premium-ui .cx-form .checkbox-label { padding:0 !important; border:0 !important; background:transparent !important; color:inherit !important; font:inherit !important; }
body.premium-ui .cx-form .checkmark { display:none !important; }

/* Solution-interest choices keep a spacious grid but no boxed labels. */
body.premium-ui .cx-form .interests-grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 22px !important;
  margin:8px 0 0 !important;
  padding:0 !important;
}

/* Action areas align to form edges. */
body.premium-ui .cx-form > button[type="submit"] {
  width:auto !important;
  min-width:170px !important;
  margin:4px 0 0 !important;
  align-self:flex-start !important;
}
body.premium-ui .cx-form .form-submit-wrap {
  display:flex !important;
  width:100% !important;
  margin:10px 0 0 !important;
  padding:18px 0 0 !important;
  border-top:1px solid rgba(255,255,255,.09) !important;
  justify-content:flex-start !important;
  align-items:center !important;
}
body.premium-ui .cx-form .form-submit-wrap button { width:auto !important; min-width:190px !important; margin:0 !important; }
body.premium-ui .cx-form .form-submit-row {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:28px !important;
  align-items:center !important;
  width:100% !important;
  margin:8px 0 0 !important;
  padding:20px 0 0 !important;
  border-top:1px solid rgba(255,255,255,.09) !important;
}
body.premium-ui .cx-form .form-submit-row p {
  max-width:620px !important;
  margin:0 !important;
  color:#7f8790 !important;
  font-size:.75rem !important;
  line-height:1.55 !important;
  text-align:left !important;
}
body.premium-ui .cx-form .form-submit-row .btn {
  width:auto !important;
  min-width:200px !important;
  margin:0 !important;
  justify-self:end !important;
}
body.premium-ui .cx-form :is(.form-success-new,#form-success-msg,#eizo-form-msg,#senn-form-msg) {
  text-align:left !important;
}

/* Support-specific width and rhythm. */
body.page-support .support-form-layout { grid-template-columns:minmax(260px,.72fr) minmax(0,1.45fr) !important; gap:44px !important; align-items:start !important; }
body.page-support .support-form-layout > * { min-width:0 !important; }

/* Careers/simple forms are narrower and easier to scan. */
body.page-careers #career-form { max-width:840px !important; }
body.page-careers #career-form > button[type="submit"] { margin-top:4px !important; }

/* Responsive alignment is explicit rather than inherited from legacy page rules. */
@media (max-width: 900px) {
  body.premium-ui .section-header,
  body.premium-ui .events-section-header { width:100% !important; }
  body.premium-ui .cx-form :is(.frow3) { grid-template-columns:1fr 1fr !important; }
  body.premium-ui .cx-form .interests-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.page-support .support-form-layout { grid-template-columns:1fr !important; gap:28px !important; }
}
@media (max-width: 640px) {
  body.premium-ui .container,
  body.premium-ui .hero-content,
  body.premium-ui .nav-container,
  body.premium-ui .footer-container,
  body.premium-ui .mega-shell { width:min(calc(100% - 32px),var(--cx-container)) !important; }
  body.premium-ui h2 { font-size:clamp(1.8rem,8vw,2.35rem) !important; }
  body.premium-ui .section-title,
  body.premium-ui .section-header .section-title,
  body.premium-ui .events-section-header h2 { font-size:clamp(2.1rem,10vw,3rem) !important; }
  body.premium-ui .section-header,
  body.premium-ui .events-section-header { margin-bottom:30px !important; }
  body.premium-ui .cx-form,
  body.premium-ui form.cx-form,
  body.premium-ui .form-wrap.cx-form { padding:20px !important; border-radius:15px !important; }
  body.premium-ui .cx-form :is(.form-row-new,.form-row,.form-grid-2,.frow,.frow2,.frow3) { grid-template-columns:1fr !important; gap:14px !important; }
  body.premium-ui .cx-form .radio-group,
  body.premium-ui .cx-form .interests-grid { grid-template-columns:1fr !important; gap:0 !important; }
  body.premium-ui .cx-form .form-submit-row { grid-template-columns:1fr !important; gap:14px !important; align-items:start !important; }
  body.premium-ui .cx-form .form-submit-row .btn,
  body.premium-ui .cx-form .form-submit-wrap button,
  body.premium-ui .cx-form > button[type="submit"] { width:100% !important; min-width:0 !important; justify-self:stretch !important; }
  body.premium-ui :is(.hero-actions,.cta-row,.section-actions) { width:100% !important; align-items:stretch !important; }
  body.premium-ui :is(.hero-actions,.cta-row,.section-actions) .btn { flex:1 1 100% !important; width:100% !important; }
}

/* Form variants not covered by the generic legacy naming. */
body.premium-ui .cx-form .solution-spec-grid {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  margin:0 0 16px !important;
  align-items:start !important;
}
body.premium-ui .cx-form .solution-final-grid {
  display:grid !important;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) !important;
  gap:16px !important;
  margin:0 0 16px !important;
  align-items:start !important;
}

/* Experience Centre checkbox group uses the same clean control language. */
body.page-events .cx-form [data-required-checkbox-group] {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 22px !important;
  margin-top:3px !important;
}
body.page-events .cx-form [data-required-checkbox-group] > label {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:40px !important;
  padding:9px 0 !important;
  margin:0 !important;
  border-bottom:1px solid rgba(255,255,255,.065) !important;
  color:#b7bec6 !important;
  font-size:.8rem !important;
  font-weight:520 !important;
  cursor:pointer !important;
}
body.page-events .cx-form [data-required-checkbox-group] input[type="checkbox"] {
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:0 0 18px !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  min-height:18px !important;
  margin:0 !important;
  padding:0 !important;
  border:1.5px solid #66707a !important;
  border-radius:4px !important;
  background:#080c11 !important;
  display:grid !important;
  place-items:center !important;
}
body.page-events .cx-form [data-required-checkbox-group] input[type="checkbox"]::before {
  content:"" !important;
  width:8px !important;
  height:4px !important;
  border-left:2px solid #05110c !important;
  border-bottom:2px solid #05110c !important;
  transform:translateY(-1px) rotate(-45deg) scale(0) !important;
}
body.page-events .cx-form [data-required-checkbox-group] input[type="checkbox"]:checked {
  background:var(--cx-accent) !important;
  border-color:var(--cx-accent) !important;
}
body.page-events .cx-form [data-required-checkbox-group] input[type="checkbox"]:checked::before {
  transform:translateY(-1px) rotate(-45deg) scale(1) !important;
}

/* Support layout: fixed editorial rail + readable form width. */
body.page-support .support-request-layout {
  display:grid !important;
  grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr) !important;
  gap:48px !important;
  align-items:start !important;
}
body.page-support .support-request-aside {
  min-width:0 !important;
  text-align:left !important;
}
body.page-support .support-request-aside h3,
body.page-support .support-request-aside p,
body.page-support .support-request-aside .support-direct-link { text-align:left !important; }
body.page-support .support-request-layout .form-wrap.cx-form {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

/* PTZ intentionally centered section headers keep their centered geometry. */
body.page-ptzoptics .section-header.text-center { max-width:900px !important; }

@media (max-width: 960px) {
  body.page-support .support-request-layout { grid-template-columns:1fr !important; gap:30px !important; }
  body.page-support .support-request-aside { position:static !important; }
  body.premium-ui .cx-form .solution-spec-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  body.premium-ui .cx-form .solution-spec-grid,
  body.premium-ui .cx-form .solution-final-grid,
  body.page-events .cx-form [data-required-checkbox-group] { grid-template-columns:1fr !important; }
}

/* Final rendered-QA corrections. */
body.premium-ui .cx-form input[name="_honey"] {
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

/* All form actions finish on the same right edge on desktop. */
body.premium-ui .cx-form > button[type="submit"] {
  display:flex !important;
  margin:6px 0 0 auto !important;
}
body.premium-ui .cx-form .form-submit-wrap {
  justify-content:flex-end !important;
}
body.premium-ui .cx-form .form-submit-wrap button {
  margin-left:auto !important;
  margin-right:0 !important;
}

/* About Vision/Mission cards use identical text treatment. */
body.page-about .about-vm-box :is(.vm-large-text,p) {
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  color:#aeb5bd !important;
  font-size:1rem !important;
  line-height:1.72 !important;
  font-weight:450 !important;
  text-align:left !important;
}
body.page-about .about-vm-box h2 { margin-bottom:16px !important; }

/* Sticky header should not cover anchored section titles. */
body.premium-ui section[id],
body.premium-ui [id].section-header,
body.premium-ui form[id] { scroll-margin-top:calc(var(--cx-header) + 24px) !important; }

@media (max-width:640px) {
  body.premium-ui .cx-form > button[type="submit"],
  body.premium-ui .cx-form .form-submit-wrap button { margin-left:0 !important; margin-right:0 !important; }
}

/* Remove double form shells: one surface per form. */
body.page-careers .contact-form-new,
body.page-events .experience-form-shell,
body.page-solutions .sol-form-container {
  width:min(100%, 1080px) !important;
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
body.page-careers .contact-form-new,
body.page-events .experience-form-shell { max-width:920px !important; }
body.page-careers .form-title-new {
  width:min(100%,840px) !important;
  margin:0 auto 12px !important;
  color:#f2f4f5 !important;
  font-size:.92rem !important;
  font-weight:680 !important;
  text-align:left !important;
}
body.page-solutions .sol-form-header {
  width:min(100%, 900px) !important;
  margin:0 0 28px !important;
  text-align:left !important;
}
body.page-solutions .sol-form-header h2,
body.page-solutions .sol-form-header p {
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
}
body.page-solutions .sol-form-header p { max-width:680px !important; }

@media (max-width:640px) {
  body.page-careers .contact-form-new,
  body.page-events .experience-form-shell,
  body.page-solutions .sol-form-container { width:100% !important; max-width:none !important; }
  body.page-careers .form-title-new { width:100% !important; }
}

/* Section edge consistency: horizontal gutters belong to .container, not the section. */
body.page-blackmagic .support-section,
body.page-blackmagic .positioning-banner,
body.page-events .events-section,
body.page-ptzoptics .ptz-hero {
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Split-page section titles are deliberately smaller than full section headers. */
body.page-eizo-medical .pitch-content .section-title {
  font-size:clamp(2.25rem,3.35vw,3.25rem) !important;
  line-height:1.05 !important;
}

/* Blackmagic trust statement follows the same left editorial axis as its heading. */
body.page-blackmagic .trust-statement-box {
  padding:30px 32px !important;
  text-align:left !important;
}
body.page-blackmagic .trust-statement-box p {
  max-width:900px !important;
  margin:0 !important;
  text-align:left !important;
}

/* =========================================================
   FINAL PRODUCTION CLEANUP
   Uses the original Camixel media library while removing
   decorative separator lines and normalizing the UI rhythm.
   ========================================================= */

/* Small product-style markers instead of decorative dash motifs */
body.premium-ui .section-tag::before,
body.premium-ui .mega-kicker::before,
body.premium-ui .support-aside-kicker::before,
body.premium-ui .trust-eyebrow::before {
  content:"" !important;
  width:6px !important;
  height:6px !important;
  flex:0 0 6px !important;
  border-radius:2px !important;
  background:var(--page-accent,var(--cx-accent)) !important;
  opacity:1 !important;
}
body.premium-ui .trust-eyebrow::after,
body.premium-ui .form-section-title::before,
body.premium-ui .form-block-title::before,
body.page-brand-kit .section-title::after {
  display:none !important;
  content:none !important;
}
body.premium-ui :is(.section-tag,.mega-kicker,.support-aside-kicker,.trust-eyebrow) { gap:9px !important; }

/* Natural spacing and alignment */
html { scroll-padding-top: calc(var(--cx-header) + 18px); }
body.premium-ui main { overflow:clip; }
body.premium-ui .section-header:not(.text-center) { margin-left:0 !important; margin-right:auto !important; text-align:left !important; }
body.premium-ui .section-header:not(.text-center) :is(h2,.section-title,.section-desc,.section-sub,p) { margin-left:0 !important; margin-right:0 !important; text-align:left !important; }
body.premium-ui .section-header.text-center :is(h2,.section-title,.section-desc,.section-sub,p) { margin-left:auto !important; margin-right:auto !important; text-align:center !important; }
body.premium-ui :is(.hero-copy,.hero-text,.hero-content-slide,.contact-left,.contact-info-eizo,.cta-text,.lead-info) :is(.hero-actions,.cta-row,.section-actions) { justify-content:flex-start !important; }

/* Product catalogue surfaces */
body.premium-ui :is(.product-card,.model-card,.commerce-card,.med-product-card) {
  border-color:rgba(255,255,255,.095) !important;
  background:linear-gradient(180deg,rgba(16,21,28,.98),rgba(10,14,19,.98)) !important;
  box-shadow:0 10px 32px rgba(0,0,0,.16) !important;
}
body.premium-ui :is(.product-card,.model-card,.commerce-card,.med-product-card):hover {
  border-color:rgba(98,215,167,.28) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.25) !important;
}

/* Form controls stay compact and clearly grouped */
body.premium-ui .cx-form {
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 18px 56px rgba(0,0,0,.18) !important;
}
body.premium-ui .cx-form :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  border-color:rgba(255,255,255,.12) !important;
  background:#0c1117 !important;
}
body.premium-ui .cx-form :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus {
  border-color:rgba(98,215,167,.62) !important;
  box-shadow:0 0 0 3px rgba(98,215,167,.10) !important;
}
body.premium-ui .cx-form :is(.radio-opt,.checkbox-container,.custom-checkbox) {
  border-color:transparent !important;
  background:transparent !important;
  padding-inline:2px 10px !important;
}
body.premium-ui .cx-form :is(.radio-opt,.checkbox-container,.custom-checkbox):hover { background:rgba(255,255,255,.025) !important; }
body.premium-ui .cx-form :is(.radio-opt,.checkbox-container,.custom-checkbox):has(input:checked) {
  background:rgba(98,215,167,.055) !important;
  border-color:transparent !important;
}

/* FAQ uses quiet separators rather than box stacks */
body.premium-ui .faq-item,
body.premium-ui details.faq-item {
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Keep the compact brand chooser readable without a box-inside-box feel */
body.premium-ui .mega-logo-stage {
  background:transparent !important;
  border:0 !important;
  padding:6px 8px !important;
}
body.premium-ui .mega-brand { border-color:rgba(255,255,255,.055) !important; }

@media (max-width: 760px) {
  body.premium-ui .container,
  body.premium-ui .nav-container,
  body.premium-ui .hero-content,
  body.premium-ui .footer-container,
  body.premium-ui .mega-shell { width:min(calc(100% - 32px),var(--cx-container)) !important; }
  body.premium-ui section:not(.hero):not(.hero-section):not(.page-404) { padding-top:56px !important; padding-bottom:56px !important; }
  body.premium-ui .cx-form { padding:18px !important; }
}

/* Bundled source: camixel-catalogue.css */
/* Camixel Catalogue Theme v1.0
   Dark global chrome + warm catalogue surfaces + Camixel green actions.
   Designed as a consistent distributor UI across all represented brands. */

:root {
  --cx-black: #101010;
  --cx-black-2: #171717;
  --cx-black-3: #202020;
  --cx-cream: #f4f1e9;
  --cx-cream-2: #faf8f3;
  --cx-cream-3: #ece8de;
  --cx-paper: #fffdf8;
  --cx-ink: #171816;
  --cx-body: #4d504b;
  --cx-muted: #777a73;
  --cx-line: #d9d4c9;
  --cx-line-dark: rgba(255,255,255,.12);
  --cx-green: #58c99b;
  --cx-green-strong: #3fb783;
  --cx-green-soft: #dff4ea;
  --cx-radius: 12px;
  --cx-shadow: 0 14px 40px rgba(24, 24, 20, .08);
  --cx-container: 1320px;
  --cx-text: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
}

html { background: var(--cx-cream) !important; }
body.premium-ui {
  background: var(--cx-cream) !important;
  color: var(--cx-ink) !important;
  font-family: var(--cx-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.premium-ui *:not(code):not(pre):not(kbd):not(samp) { font-family: var(--cx-text) !important; }
body.premium-ui a { text-underline-offset: 3px; }

/* ---------- Global dark chrome ---------- */
.nav-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  height: 68px !important;
  min-height: 68px !important;
  background: rgba(16,16,16,.98) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.nav-container {
  height: 68px !important;
  width: min(calc(100% - 48px), var(--cx-container)) !important;
  max-width: var(--cx-container) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 190px minmax(0,1fr) 190px !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 0 !important;
}
.nav-logo { justify-self: start !important; display: inline-flex !important; align-items: center !important; }
.site-logo-header { width: auto !important; height: 31px !important; max-width: 148px !important; object-fit: contain !important; }
.nav-links {
  justify-self: center !important;
  display: flex !important;
  align-items: stretch !important;
  height: 68px !important;
  gap: 2px !important;
  margin: 0 !important;
}
.nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 68px !important;
  padding: 0 15px !important;
  color: #d8d8d5 !important;
  font-size: 13px !important;
  font-weight: 590 !important;
  letter-spacing: -.01em !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-transform: none !important;
}
.nav-link:hover,
.nav-link.active,
.nav-link[aria-current="page"] { color: #fff !important; background: transparent !important; }
.nav-link::after {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  right: 15px !important;
  bottom: 0 !important;
  height: 2px !important;
  background: transparent !important;
  transform: none !important;
}
.nav-link:hover::after,
.nav-link.active::after,
.nav-link[aria-current="page"]::after { background: var(--cx-green) !important; }
.nav-cta { justify-self: end !important; margin: 0 !important; }
.nav-cta-link,
.nav-cta a {
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  border: 1px solid var(--cx-green) !important;
  background: var(--cx-green) !important;
  color: #0d1712 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
}
.nav-cta-link:hover,
.nav-cta a:hover { background: var(--cx-green-strong) !important; border-color: var(--cx-green-strong) !important; transform: none !important; }
.hamburger { color: #fff !important; }
.hamburger span { background: #fff !important; }

/* Compact dark brand portfolio dropdown */
.mega-dropdown {
  position: fixed !important;
  top: 68px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 18px 24px 22px !important;
  background: #151515 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 42px rgba(0,0,0,.25) !important;
}
.mega-shell { width: min(100%, 1100px) !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; }
.mega-brand-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 0 !important; background: transparent !important; }
.mega-brand {
  min-height: 88px !important;
  padding: 14px 20px !important;
  display: grid !important;
  grid-template-columns: 92px minmax(0,1fr) 18px !important;
  align-items: center !important;
  gap: 14px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
.mega-brand:last-child { border-right: 0 !important; }
.mega-brand:hover { background: rgba(255,255,255,.045) !important; transform: none !important; }
.mega-logo-stage {
  width: 92px !important;
  height: 52px !important;
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #242424 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 6px !important;
}
.mega-logo-stage img { max-width: 100% !important; max-height: 30px !important; object-fit: contain !important; }
.mega-brand-copy strong { color: #fff !important; font-size: 13px !important; font-weight: 700 !important; }
.mega-brand-copy small { color: #969994 !important; font-size: 11px !important; line-height: 1.35 !important; margin-top: 4px !important; }
.mega-arrow { color: var(--cx-green) !important; }

/* ---------- Typography + section rhythm ---------- */
.section-shell,
.section-header,
.events-section-header,
.cat-tabs-inner,
.contact-grid-new,
.contact-grid-eizo,
.lead-grid,
.contact-support-grid,
.sol-filter-container,
.sol-form-container,
.eizo-brand-inner {
  width: min(calc(100% - 56px), var(--cx-container)) !important;
  max-width: var(--cx-container) !important;
  margin-inline: auto !important;
}

body.premium-ui .section-title,
body.premium-ui h2.section-title {
  color: var(--cx-ink) !important;
  font-size: clamp(2rem, 3.25vw, 3.35rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  font-weight: 700 !important;
  max-width: 900px !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.section-desc,
.section-sub,
body.premium-ui .section-header > p,
body.premium-ui .section-header .section-desc {
  color: var(--cx-body) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  max-width: 760px !important;
}
.section-tag,
.brand-announcement-tag,
.sol-hero-kicker {
  color: #2a7d5d !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  font-weight: 760 !important;
  text-transform: uppercase !important;
}
.section-tag::before,
.section-tag::after,
.sol-hero-kicker::before,
.sol-hero-kicker::after { display: none !important; }
.section-header { margin-bottom: 38px !important; }

/* The light catalogue canvas */
body.premium-ui .prod-section,
body.premium-ui .products-section,
body.premium-ui .models-section,
body.premium-ui .solutions-section,
body.premium-ui .events-section,
body.premium-ui .industries-section,
body.premium-ui .faq-section,
body.premium-ui .faq-editorial-section,
body.premium-ui .val-section,
body.premium-ui .trust-section,
body.premium-ui .workflow-section,
body.premium-ui .support-section,
body.premium-ui .warranty-section,
body.premium-ui .team-section,
body.premium-ui .why-ptz-section,
body.premium-ui .ecosystem-section,
body.premium-ui .advantage-section,
body.premium-ui .arch-section,
body.premium-ui .shift-section,
body.premium-ui .compare-section,
body.premium-ui .timeline-section,
body.premium-ui .core-values-section,
body.premium-ui .who-section,
body.premium-ui .about-vm-section,
body.premium-ui .crossbrand-section,
body.premium-ui .camixel-value-section,
body.premium-ui .contact-support-section,
body.premium-ui .lead-section {
  background: var(--cx-cream) !important;
  color: var(--cx-ink) !important;
}

/* Keep media-led hero areas dark */
.hero,
.ptz-hero,
.events-hero,
.about-hero,
.sol-hero {
  background-color: #151515 !important;
  color: #fff !important;
}
.hero .hero-headline,
.hero .hero-sub,
.ptz-hero .ptz-hero-title,
.ptz-hero .section-sub,
.events-hero h1,
.events-hero p,
.about-hero .hero-title,
.about-hero .hero-subtitle,
.sol-hero .sol-hero-heading,
.sol-hero .sol-hero-copy { color: #fff !important; }
.hero-pill,
.hero .section-tag,
.ptz-hero .hero-pill { color: #adf0d1 !important; background: rgba(5,15,10,.35) !important; border-color: rgba(88,201,155,.35) !important; }
.hero-grid-overlay,.hero-mesh-glow { opacity: .14 !important; }

/* ---------- Buttons / CTAs ---------- */
.btn,
.btn-primary,
.primary-btn,
.hero-btn-primary,
.cat-cta,
.final-cta a,
.final-cta-btns a,
.form-submit-row button,
.form-submit-wrap button,
.cx-form button[type="submit"],
.cx-form input[type="submit"],
.contact-form button[type="submit"],
.contact-form-new button[type="submit"],
.contact-form-eizo button[type="submit"],
.sol-builder-form button[type="submit"],
.lead-form-wrap button[type="submit"],
.ptz-cta-banner a:first-of-type,
.cta-actions a:first-child {
  min-height: 44px !important;
  padding: 0 19px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--cx-green) !important;
  border: 1px solid var(--cx-green) !important;
  color: #0c1711 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  transform: none !important;
}
.btn:hover,
.btn-primary:hover,
.primary-btn:hover,
.hero-btn-primary:hover,
.cat-cta:hover,
.cx-form button[type="submit"]:hover { background: var(--cx-green-strong) !important; border-color: var(--cx-green-strong) !important; transform: none !important; }
.btn-secondary,
.hero-btn-secondary,
.btn-outline,
.model-card-link,
.card-link-text,
.sol-hero-actions a:not(:first-child),
.cta-actions a:not(:first-child) {
  min-height: 44px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid #8a8b85 !important;
  color: var(--cx-ink) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 670 !important;
}
.hero .btn-secondary,
.hero .hero-btn-secondary,
.ptz-hero .btn-secondary,
.events-hero .btn-secondary,
.sol-hero .btn-secondary,
.sol-hero-actions a:not(:first-child) { color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.hero-actions,.cta-actions,.final-cta-btns,.sol-hero-actions { gap: 10px !important; align-items: center !important; }

/* ---------- Cards: quiet, product-first ---------- */
.product-card,
.commerce-card,
.model-card,
.ptz-cat-card,
.solution-card,
.event-card,
.news-card,
.gallery-card,
.value-card,
.val-card,
.trust-card,
.support-card,
.why-card,
.why-ptz-card,
.team-card,
.arch-card,
.eco-card,
.i-card,
.tl-card,
.vm-card,
.pillar-card,
.cs-card,
.cb-card,
.cv-card {
  background: var(--cx-paper) !important;
  color: var(--cx-ink) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: var(--cx-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transform: none !important;
}
.product-card:hover,
.commerce-card:hover,
.model-card:hover,
.ptz-cat-card:hover,
.solution-card:hover,
.event-card:hover,
.value-card:hover,
.val-card:hover {
  border-color: #bbb7ad !important;
  box-shadow: var(--cx-shadow) !important;
  transform: translateY(-2px) !important;
}
.product-card h3,.commerce-card h3,.model-card h3,.ptz-cat-card h3,.solution-card h3,
.product-card h4,.commerce-card h4,.model-card h4 { color: var(--cx-ink) !important; }
.product-card p,.commerce-card p,.model-card p,.ptz-cat-card p,.solution-card p,
.value-card p,.val-card p,.trust-card p,.support-card p { color: var(--cx-body) !important; }

/* Catalogue image stages */
.product-card img,
.commerce-card img,
.model-card-img img,
.ptz-cat-card img { object-fit: contain !important; }
.product-card .product-image,
.product-card .product-img,
.commerce-card .product-image,
.commerce-card .product-media,
.model-card-img,
.ptz-cat-card .ptz-cat-image,
.ptz-cat-card .cat-image {
  background: #ebe8e0 !important;
  border-bottom: 1px solid var(--cx-line) !important;
}

/* Product/catalogue grids breathe like manufacturer catalogues */
.cat-products-grid,
.models-grid,
.ptz-categories-grid,
.solutions-grid,
.products-grid {
  gap: 20px !important;
  align-items: stretch !important;
}
.product-card,
.commerce-card,
.model-card,
.ptz-cat-card,
.solution-card,
.cb-card,
.cv-card,
.why-ptz-card,
.value-card,
.val-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  height: 100% !important;
}
.product-card > .btn,
.commerce-card .btn,
.model-card .btn,
.ptz-cat-card > .btn,
.solution-card .btn,
.cb-card .btn,
.cv-card .btn,
.why-ptz-card .btn,
.value-card .btn,
.val-card .btn,
.model-card-link {
  margin-top: auto !important;
}

/* ---------- Dark related bars: tabs, filters, secondary navigation ---------- */
.cat-tabs-section,
.wf-tabs,
.cat-tabs,
.lineup-filter-group,
.sol-filter-container,
.brand-filter-tabs,
.filter-section {
  background: var(--cx-black-2) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: none !important;
}
.cat-tabs-section { border-top: 1px solid rgba(255,255,255,.08) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.cat-tab,
.wf-tab,
.cat-tab-btn,
.lineup-filter-btn,
.sol-filter-btn,
.brand-tab {
  background: transparent !important;
  color: #bfc0bd !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cat-tab:hover,.wf-tab:hover,.cat-tab-btn:hover,.lineup-filter-btn:hover,.sol-filter-btn:hover,.brand-tab:hover,
.cat-tab.active,.wf-tab.active,.cat-tab-btn.active,.lineup-filter-btn.active,.sol-filter-btn.active,.brand-tab.active,.active-filter {
  color: #fff !important;
  border-bottom-color: var(--cx-green) !important;
  background: transparent !important;
}

/* ---------- Forms: warm clean B2B controls ---------- */
.cx-form,
.contact-form,
.contact-form-new,
.contact-form-eizo,
.sol-builder-form,
.form-wrap,
.lead-form-wrap,
.experience-form-shell,
.sol-form-container {
  background: var(--cx-paper) !important;
  color: var(--cx-ink) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(30,28,22,.06) !important;
}
.form-section,
.form-block,
.form-section-group { border-color: var(--cx-line) !important; }
.form-block-title,
.form-section-title,
.form-title-new,
.sol-form-header h2,
.sol-form-header h3 { color: var(--cx-ink) !important; }
.cx-form label,
.form-group label,
.form-group-new label,
.form-grp label,
.ux-form-group label,
.sol-builder-form label { color: #3f423d !important; font-weight: 650 !important; }
.cx-form input:not([type="checkbox"]):not([type="radio"]),
.cx-form select,
.cx-form textarea,
.contact-form input:not([type="checkbox"]):not([type="radio"]),
.contact-form select,
.contact-form textarea,
.contact-form-new input:not([type="checkbox"]):not([type="radio"]),
.contact-form-new select,
.contact-form-new textarea,
.contact-form-eizo input:not([type="checkbox"]):not([type="radio"]),
.contact-form-eizo select,
.contact-form-eizo textarea,
.sol-builder-form input:not([type="checkbox"]):not([type="radio"]),
.sol-builder-form select,
.sol-builder-form textarea,
.form-wrap input:not([type="checkbox"]):not([type="radio"]),
.form-wrap select,
.form-wrap textarea {
  background: #fff !important;
  color: var(--cx-ink) !important;
  border: 1px solid #cac6bc !important;
  border-radius: 7px !important;
  min-height: 44px !important;
  box-shadow: none !important;
}
.cx-form input:focus,.cx-form select:focus,.cx-form textarea:focus,
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus,
.sol-builder-form input:focus,.sol-builder-form select:focus,.sol-builder-form textarea:focus {
  border-color: var(--cx-green-strong) !important;
  box-shadow: 0 0 0 3px rgba(88,201,155,.15) !important;
  outline: none !important;
}
.cx-form input::placeholder,.cx-form textarea::placeholder,
.contact-form input::placeholder,.contact-form textarea::placeholder { color: #9d9d96 !important; opacity: 1 !important; }
.form-sublabel,.form-help,.field-help,.helper-text { color: var(--cx-muted) !important; }

/* Checkboxes + radios */
input[type="checkbox"],input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 8px 0 0 !important;
  background: #fff !important;
  border: 1.5px solid #96978f !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  position: relative !important;
}
input[type="checkbox"] { border-radius: 4px !important; }
input[type="radio"] { border-radius: 50% !important; }
input[type="checkbox"]:checked,
input[type="radio"]:checked { background: var(--cx-green) !important; border-color: var(--cx-green-strong) !important; }
input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #102117 !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}
input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  background: #102117 !important;
  border-radius: 50% !important;
}
.interests-grid label,
.checkbox-group label,
.radio-group label,
.filter-cb,
.option-card,
.choice-option {
  background: transparent !important;
  color: var(--cx-ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ---------- FAQs as editorial rows ---------- */
.faq-section,.faq-editorial-section,.eizo-faq-section { background: var(--cx-cream-2) !important; }
.faq-item,
.faq-editorial-list > *,
.faq-editorial-question,
.faq-editorial-answer {
  background: transparent !important;
  color: var(--cx-ink) !important;
  border-color: var(--cx-line) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.faq-item,
.faq-editorial-list > * {
  display: flex !important;
  flex-direction: column !important;
}
.faq-question,
.faq-editorial-question,
.faq-answer,
.faq-editorial-answer {
  width: 100% !important;
}
.faq-question,.faq-editorial-question { color: var(--cx-ink) !important; }
.faq-answer,.faq-editorial-answer { color: var(--cx-body) !important; }

/* ---------- Brand/page accents (subtle; actions stay Camixel green) ---------- */
.page-blackmagic { --brand-accent: #f38a32; }
.page-eizo,.page-eizo-medical { --brand-accent: #397be8; }
.page-sennheiser { --brand-accent: #5c6b70; }
.page-ptzoptics { --brand-accent: #2f77dc; }
.page-blackmagic .section-tag,
.page-eizo .section-tag,.page-eizo-medical .section-tag,
.page-sennheiser .section-tag,.page-ptzoptics .section-tag { color: var(--brand-accent, #2a7d5d) !important; }
.page-blackmagic .hero-pill,.page-eizo .hero-pill,.page-sennheiser .hero-pill,.page-ptzoptics .hero-pill { color: #fff !important; }

/* Homepage static brand strip becomes a clean cream manufacturer rail */
.brands-section,.brands-static-strip { background: #eae6dc !important; }
.brands-section-title { color: var(--cx-ink) !important; }
.brand-card {
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid #cbc7bc !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.brand-card:last-child { border-right: 0 !important; }
.brand-logo-img { filter: none !important; opacity: 1 !important; }

/* Key points / stats: dark contrast band */
.eizo-brand-section,
.trust-section,
.camixel-value-section,
.ptz-cta-banner,
.cta-band,
.final-cta,
.closer-section {
  background: var(--cx-black-2) !important;
  color: #fff !important;
}
.eizo-brand-section h2,.eizo-brand-section h3,.eizo-brand-section p,
.trust-section h2,.trust-section h3,
.camixel-value-section h2,.camixel-value-section h3,
.ptz-cta-banner h2,.ptz-cta-banner p,
.cta-band h2,.cta-band p,
.final-cta h2,.final-cta p,
.closer-section h2,.closer-section p { color: #fff !important; }

/* Footer remains dark, but cleaner */
footer,.footer { background: #111 !important; color: #bcbdb8 !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
footer h3,footer h4,footer strong,.footer h3,.footer h4 { color: #fff !important; }
footer a,.footer a { color: #bcbdb8 !important; }
footer a:hover,.footer a:hover { color: var(--cx-green) !important; }

/* Modal / popup surfaces */
.modal-content,.event-popup-card,.sol-modal-content {
  background: var(--cx-paper) !important;
  color: var(--cx-ink) !important;
  border-color: var(--cx-line) !important;
}

/* Selection / focus */
::selection { background: rgba(88,201,155,.35); color: #101510; }
:focus-visible { outline: 2px solid var(--cx-green-strong) !important; outline-offset: 3px !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-container { grid-template-columns: 160px minmax(0,1fr) 160px !important; width: min(calc(100% - 32px), var(--cx-container)) !important; }
  .nav-link { padding-inline: 10px !important; }
  .mega-brand-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .mega-brand:nth-child(2) { border-right: 0 !important; }
  .mega-brand:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.10) !important; }
}
@media (max-width: 820px) {
  .nav-header { height: 60px !important; min-height: 60px !important; }
  .nav-container { height: 60px !important; display: flex !important; width: calc(100% - 28px) !important; justify-content: space-between !important; }
  .site-logo-header { height: 28px !important; }
  .nav-links {
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 60px) !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 18px 22px !important;
    background: #151515 !important;
    overflow-y: auto !important;
  }
  .nav-links.active,.nav-links.open { display: flex !important; }
  .nav-link { height: 48px !important; padding: 0 6px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
  .nav-link::after { display: none !important; }
  .nav-cta { margin-left: auto !important; }
  .nav-cta-link { display: none !important; }
  .hamburger { display: flex !important; }
  .mega-dropdown {
    position: static !important;
    top: auto !important;
    padding: 8px 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
  }
  .mega-shell { width: 100% !important; }
  .mega-brand-grid { grid-template-columns: 1fr !important; }
  .mega-brand { min-height: 70px !important; grid-template-columns: 76px 1fr 18px !important; border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; padding: 10px 8px !important; }
  .mega-logo-stage { width: 76px !important; height: 44px !important; }
  .section-shell,.section-header,.events-section-header,.contact-grid-new,.contact-grid-eizo,.lead-grid,.contact-support-grid,.sol-filter-container,.sol-form-container,.eizo-brand-inner { width: calc(100% - 32px) !important; }
  body.premium-ui .section-title { font-size: clamp(2rem, 10vw, 2.7rem) !important; }
  .hero-actions,.cta-actions,.final-cta-btns,.sol-hero-actions { flex-wrap: wrap !important; }
}
@media (max-width: 560px) {
  .mega-brand-copy small { display: none !important; }
  .mega-brand { grid-template-columns: 74px 1fr 16px !important; }
  .product-card,.commerce-card,.model-card { border-radius: 10px !important; }
  .cx-form,.contact-form,.contact-form-new,.contact-form-eizo,.sol-builder-form,.form-wrap,.lead-form-wrap,.experience-form-shell,.sol-form-container { border-radius: 10px !important; }
  .hero-actions > *,.cta-actions > *,.sol-hero-actions > * { width: 100% !important; }
}

/* ---------- High-specificity catalogue exceptions ---------- */
body.premium-ui.page-solutions .sol-hero {
  background: #171717 !important;
  color: #fff !important;
}
body.premium-ui.page-solutions .sol-hero .sol-hero-heading,
body.premium-ui.page-solutions .sol-hero .sol-hero-copy,
body.premium-ui.page-solutions .sol-hero .sol-brand-line { color: #fff !important; }
body.premium-ui.page-solutions .sol-hero .sol-hero-heading span { color: var(--cx-green) !important; }
body.premium-ui.page-solutions .sol-hero .btn-outline,
body.premium-ui.page-solutions .sol-hero .btn-secondary,
body.premium-ui.page-solutions .sol-hero-actions a:not(:first-child) {
  color: #fff !important;
  border-color: rgba(255,255,255,.48) !important;
  background: transparent !important;
}

body.premium-ui.page-eizo .eizo-brand-section,
body.premium-ui.page-eizo-medical .eizo-brand-section {
  background: #171717 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.10) !important;
  padding-block: 46px !important;
}
body.premium-ui.page-eizo .eizo-logo-text h2,
body.premium-ui.page-eizo-medical .eizo-logo-text h2 { color: #fff !important; }
body.premium-ui.page-eizo .eizo-logo-text p,
body.premium-ui.page-eizo-medical .eizo-logo-text p,
body.premium-ui.page-eizo .eizo-stat span,
body.premium-ui.page-eizo-medical .eizo-stat span { color: #a7aaa5 !important; }
body.premium-ui.page-eizo .eizo-stat strong,
body.premium-ui.page-eizo-medical .eizo-stat strong { color: var(--cx-green) !important; }

body.premium-ui.page-eizo .cat-tabs-section,
body.premium-ui.page-blackmagic .cat-tabs-section,
body.premium-ui.page-eizo-medical .filter-section,
body.premium-ui.page-solutions .sol-filter-container,
body.premium-ui.page-events .brand-filter-tabs {
  background: #171717 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.10) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.premium-ui.page-eizo .cat-tab-btn,
body.premium-ui.page-blackmagic .cat-tab,
body.premium-ui.page-eizo-medical .filter-cb,
body.premium-ui.page-solutions .sol-filter-btn,
body.premium-ui.page-events .brand-tab { color: #b9bbb7 !important; }
body.premium-ui.page-eizo .cat-tab-btn.active,
body.premium-ui.page-blackmagic .cat-tab.active,
body.premium-ui.page-solutions .sol-filter-btn.active,
body.premium-ui.page-events .brand-tab.active { color: #fff !important; }

body.premium-ui .hero .btn-outline,
body.premium-ui .hero .btn-ghost,
body.premium-ui .ptz-hero .btn-outline,
body.premium-ui .ptz-hero .btn-ghost,
body.premium-ui .events-hero .btn-outline,
body.premium-ui .events-hero .btn-ghost,
body.premium-ui .about-hero .btn-outline,
body.premium-ui .about-hero .btn-ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,.52) !important;
  background: rgba(0,0,0,.08) !important;
}
body.premium-ui .hero .btn-outline:hover,
body.premium-ui .hero .btn-ghost:hover,
body.premium-ui .ptz-hero .btn-outline:hover,
body.premium-ui .ptz-hero .btn-ghost:hover {
  color: #fff !important;
  border-color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}

/* Product cards should feel like a light manufacturer catalogue, not dark UI tiles. */
body.premium-ui.page-blackmagic .product-card,
body.premium-ui.page-blackmagic .commerce-card,
body.premium-ui.page-eizo .model-card,
body.premium-ui.page-eizo-medical .model-card,
body.premium-ui.page-ptzoptics .ptz-cat-card,
body.premium-ui.page-sennheiser .commerce-card {
  background: var(--cx-paper) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-ink) !important;
}
body.premium-ui.page-blackmagic .product-card .product-image,
body.premium-ui.page-blackmagic .commerce-card .product-image,
body.premium-ui.page-eizo .model-card-img,
body.premium-ui.page-eizo-medical .model-card-img,
body.premium-ui.page-ptzoptics .ptz-cat-card .ptz-cat-image,
body.premium-ui.page-sennheiser .commerce-card .product-image {
  background: #ece9e2 !important;
}

/* Dark key-message bands use white copy and Camixel green metrics. */
body.premium-ui .eizo-brand-section .section-title,
body.premium-ui .trust-section.is-dark .section-title,
body.premium-ui .cta-band .section-title,
body.premium-ui .final-cta .section-title { color: #fff !important; }

/* Mobile navigation icon geometry */
@media (max-width: 820px) {
  .hamburger {
    width: 42px !important;
    height: 42px !important;
    padding: 9px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 0 !important;
    background: transparent !important;
  }
  .hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    min-height: 2px !important;
    background: #fff !important;
    border-radius: 999px !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }
}
@media (max-width: 820px) {
  .hamburger.open span:nth-child(1),
  .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .hamburger.open span:nth-child(2),
  .hamburger.active span:nth-child(2) { opacity: 0 !important; }
  .hamburger.open span:nth-child(3),
  .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
}
.mega-dropdown { transform: none !important; }
.mega-dropdown { transition: opacity .16s ease, visibility .16s ease !important; }
.has-dropdown:hover > .mega-dropdown,
.has-dropdown:focus-within > .mega-dropdown,
.has-dropdown.brands-open > .mega-dropdown,
.has-dropdown:hover .mega-dropdown,
.has-dropdown:focus-within .mega-dropdown,
.has-dropdown.brands-open .mega-dropdown {
  transform: none !important;
}
/* Camixel green remains the shared UI accent across every represented brand. */
body.premium-ui.page-blackmagic .section-tag,
body.premium-ui.page-eizo .section-tag,
body.premium-ui.page-eizo-medical .section-tag,
body.premium-ui.page-sennheiser .section-tag,
body.premium-ui.page-ptzoptics .section-tag { color: var(--cx-green-strong) !important; }

/* ---------- Final light-surface contrast normalization ---------- */
body.premium-ui {
  --cx-body: #555952;
  --cx-muted: #73776f;
}

/* Legacy page styles often used light-on-dark muted text. Normalize those
   only on the warm catalogue surfaces so dark media/brand bands stay intact. */
body.premium-ui :where(
  .prod-section,
  .products-section,
  .models-section,
  .solutions-section,
  .events-section,
  .industries-section,
  .faq-section,
  .faq-editorial-section,
  .val-section,
  .trust-section:not(.is-dark),
  .workflow-section,
  .support-section,
  .warranty-section,
  .team-section,
  .why-ptz-section,
  .ecosystem-section,
  .advantage-section,
  .arch-section,
  .shift-section,
  .compare-section,
  .timeline-section,
  .core-values-section,
  .who-section,
  .about-vm-section,
  .crossbrand-section,
  .camixel-value-section,
  .contact-support-section,
  .lead-section,
  .contact-section,
  .contact-section-new,
  .contact-section-eizo,
  .brand-intro-section,
  .brand-story-section,
  .lineup-section,
  .usecases-section,
  .features-section,
  .applications-section,
  .form-section-main,
  .builder-section
) :where(p, li, dd, small, .muted, .text-muted, .section-desc, .section-sub, .form-help, .helper-text) {
  color: var(--cx-body) !important;
}

body.premium-ui :where(
  .prod-section,
  .products-section,
  .models-section,
  .solutions-section,
  .events-section,
  .industries-section,
  .faq-section,
  .faq-editorial-section,
  .val-section,
  .workflow-section,
  .support-section,
  .warranty-section,
  .team-section,
  .why-ptz-section,
  .ecosystem-section,
  .advantage-section,
  .arch-section,
  .shift-section,
  .compare-section,
  .timeline-section,
  .core-values-section,
  .who-section,
  .about-vm-section,
  .crossbrand-section,
  .camixel-value-section,
  .contact-support-section,
  .lead-section
) :where(h1,h2,h3,h4,h5,h6,strong,dt) {
  color: var(--cx-ink) !important;
}

/* Explicit dark islands after the broad catalogue normalization. */
body.premium-ui :where(
  .hero,
  .ptz-hero,
  .events-hero,
  .about-hero,
  .sol-hero,
  .eizo-brand-section,
  .cat-tabs-section,
  .cta-band,
  .final-cta,
  footer,
  .footer
) :where(p,li,dd,small,.muted,.text-muted,.section-desc,.section-sub) {
  color: #b9bcb6 !important;
}
body.premium-ui :where(
  .hero,
  .ptz-hero,
  .events-hero,
  .about-hero,
  .sol-hero,
  .eizo-brand-section,
  .cta-band,
  .final-cta,
  footer,
  .footer
) :where(h1,h2,h3,h4,h5,h6,strong,dt) {
  color: #fff !important;
}

/* Make form copy readable without increasing visual weight. */
body.premium-ui :where(.cx-form,.contact-form,.contact-form-new,.contact-form-eizo,.sol-builder-form,.form-wrap,.lead-form-wrap,.experience-form-shell,.sol-form-container) p,
body.premium-ui :where(.cx-form,.contact-form,.contact-form-new,.contact-form-eizo,.sol-builder-form,.form-wrap,.lead-form-wrap,.experience-form-shell,.sol-form-container) small {
  color: #666a63 !important;
}

/* Manufacturer pages share Camixel action language while retaining their
   original imagery and brand marks. */
body.premium-ui :where(.page-blackmagic,.page-eizo,.page-eizo-medical,.page-ptzoptics,.page-sennheiser) :where(.btn-primary,.primary-btn,.cat-cta,button[type="submit"],input[type="submit"]) {
  background: var(--cx-green) !important;
  border-color: var(--cx-green) !important;
  color: #0b1711 !important;
}

/* --------------------------------------------------------------------------
   Final site completion pass
   -------------------------------------------------------------------------- */

:root {
  --cx-black: #101010;
  --cx-black-2: #181818;
  --cx-cream: #f4f1e9;
  --cx-cream-2: #fbf9f4;
  --cx-cream-3: #ebe6da;
  --cx-paper: #fffdf8;
  --cx-ink: #171816;
  --cx-body: #4f544d;
  --cx-muted: #777a73;
  --cx-line: #d8d1c4;
  --cx-line-soft: rgba(23,24,22,.10);
  --cx-green: #58c99b;
  --cx-green-strong: #39aa78;
  --cx-green-soft: #dff4ea;
  --cx-radius-sm: 6px;
  --cx-radius: 8px;
  --cx-radius-lg: 12px;
  --cx-shadow: 0 16px 38px rgba(24, 24, 20, .08);
  --cx-shadow-hover: 0 18px 44px rgba(24, 24, 20, .12);
  --cx-container: 1280px;
  --cx-header: 68px;
  --cx-text: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --green: var(--cx-green);
  --green-dark: var(--cx-green-strong);
  --green-dim: rgba(88,201,155,.13);
  --green-glow: rgba(88,201,155,.18);
  --bg-0: var(--cx-cream);
  --bg-1: var(--cx-cream-2);
  --bg-2: var(--cx-cream-3);
  --bg-card: var(--cx-paper);
  --bg-card-h: #fff;
  --border: var(--cx-line);
  --border-green: rgba(57,170,120,.34);
  --text-primary: var(--cx-ink);
  --text-muted: var(--cx-body);
  --text-faint: var(--cx-muted);
  --radius-sm: var(--cx-radius-sm);
  --radius-md: var(--cx-radius);
  --radius-lg: var(--cx-radius-lg);
  --radius-xl: 14px;
}

html {
  background: var(--cx-cream) !important;
  scroll-padding-top: calc(var(--cx-header) + 20px) !important;
}

body.premium-ui {
  min-width: 320px !important;
  background: var(--cx-cream) !important;
  color: var(--cx-ink) !important;
  font-family: var(--cx-text) !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
}

body.premium-ui *:not(code):not(pre):not(kbd):not(samp) {
  font-family: var(--cx-text) !important;
}

body.premium-ui h1,
body.premium-ui h2,
body.premium-ui h3,
body.premium-ui h4,
body.premium-ui h5,
body.premium-ui h6 {
  color: var(--cx-ink) !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

body.premium-ui p,
body.premium-ui li,
body.premium-ui dd,
body.premium-ui small {
  color: var(--cx-body) !important;
}

.container,
.section-shell,
.section-header,
.events-section-header,
.contact-grid-new,
.contact-grid-eizo,
.lead-grid,
.contact-support-grid,
.sol-filter-container,
.sol-form-container,
.eizo-brand-inner,
.nav-container,
.footer .container,
.footer-top > .container,
.footer-bottom > .container {
  width: min(calc(100% - 48px), var(--cx-container)) !important;
  max-width: var(--cx-container) !important;
  margin-inline: auto !important;
}

section:not(.hero):not(.ptz-hero):not(.events-hero):not(.about-hero):not(.sol-hero):not(.page-404) {
  padding-top: clamp(56px, 6vw, 88px) !important;
  padding-bottom: clamp(56px, 6vw, 88px) !important;
}

.section-header,
.events-section-header,
.contact-header-new,
.sol-form-header {
  margin-bottom: clamp(28px, 4vw, 46px) !important;
}

.section-header.text-center,
.events-section-header,
.contact-header-new,
.sol-form-header,
.text-center {
  text-align: center !important;
}

.section-title,
body.premium-ui h2.section-title,
.events-section-header h2,
.contact-header-new h2,
.sol-form-header h2 {
  font-size: clamp(2rem, 3vw, 3.05rem) !important;
  line-height: 1.08 !important;
  font-weight: 760 !important;
  max-width: 860px !important;
  margin: 0 0 14px !important;
}

.section-header.text-center .section-title,
.events-section-header h2,
.contact-header-new h2,
.sol-form-header h2 {
  margin-inline: auto !important;
}

.section-desc,
.section-sub,
.section-header p,
.events-section-header p,
.contact-header-new p,
.sol-form-header p {
  max-width: 720px !important;
  margin-inline: auto !important;
  color: var(--cx-body) !important;
  font-size: 1rem !important;
  line-height: 1.68 !important;
}

.section-tag,
.hero-pill,
.sol-hero-kicker,
.brand-announcement-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #267657 !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: .1em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.text-accent {
  color: var(--cx-green-strong) !important;
}

.nav-header,
.nav-header.scrolled {
  height: var(--cx-header) !important;
  min-height: var(--cx-header) !important;
  background: rgba(16,16,16,.98) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

.nav-container {
  height: var(--cx-header) !important;
  min-height: var(--cx-header) !important;
  display: grid !important;
  grid-template-columns: 180px minmax(0,1fr) 180px !important;
  align-items: center !important;
  gap: 18px !important;
}

.site-logo-header {
  max-width: 148px !important;
  height: 31px !important;
  object-fit: contain !important;
}

.nav-links {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.nav-link,
.nav-brands-link {
  height: var(--cx-header) !important;
  min-height: var(--cx-header) !important;
  padding: 0 13px !important;
  color: #d8d8d5 !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 590 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.nav-link:hover,
.nav-link.active,
.nav-item:hover > .nav-link,
.nav-item.brands-open > .nav-link {
  color: #fff !important;
  background: transparent !important;
}

.nav-link::after {
  display: block !important;
  left: 13px !important;
  right: 13px !important;
  bottom: 0 !important;
  height: 2px !important;
  background: transparent !important;
  transform: none !important;
}

.nav-link:hover::after,
.nav-link.active::after,
.nav-item:hover > .nav-link::after,
.nav-item.brands-open > .nav-link::after {
  background: var(--cx-green) !important;
}

.nav-cta-link,
.nav-cta a {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 6px !important;
  background: var(--cx-green) !important;
  border: 1px solid var(--cx-green) !important;
  color: #0a1510 !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

.mega-dropdown {
  top: var(--cx-header) !important;
  background: #151515 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.mega-brand {
  border-radius: 0 !important;
}

.mega-brand-copy strong,
.mega-brand-copy small,
.footer p,
.footer li,
.footer small {
  color: inherit !important;
}

.hero,
.ptz-hero,
.events-hero,
.about-hero,
.sol-hero {
  min-height: clamp(520px, 72vh, 760px) !important;
  background: #101010 !important;
  color: #fff !important;
}

.hero .hero-content,
.ptz-hero .container,
.events-hero .container,
.about-hero .hero-inner,
.sol-hero .sol-hero-content {
  width: min(calc(100% - 48px), var(--cx-container)) !important;
  max-width: var(--cx-container) !important;
  margin-inline: auto !important;
}

.hero h1,
.hero h2,
.hero h3,
.hero p,
.ptz-hero h1,
.ptz-hero h2,
.ptz-hero p,
.events-hero h1,
.events-hero p,
.about-hero h1,
.about-hero p,
.sol-hero h1,
.sol-hero p,
.hero .hero-line,
.hero .hero-line-accent,
.hero .hero-sub,
.ptz-hero .ptz-hero-title,
.about-hero .hero-title,
.about-hero .hero-subtitle,
.sol-hero .sol-hero-heading,
.sol-hero .sol-hero-copy {
  color: #fff !important;
}

.hero .hero-sub,
.ptz-hero p,
.events-hero p,
.about-hero .hero-subtitle,
.sol-hero .sol-hero-copy {
  max-width: 760px !important;
  color: #dadbd6 !important;
}

.hero-actions,
.cta-actions,
.final-cta-btns,
.sol-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.btn,
.btn-primary,
.btn-outline,
.btn-outline-sm,
.btn-ghost,
.primary-btn,
.hero-btn-primary,
.hero-btn-secondary,
.model-card-link,
.cat-cta,
.card-link-text,
button[type="submit"],
input[type="submit"] {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 6px !important;
  padding: 0 17px !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

.btn-primary,
.primary-btn,
.hero-btn-primary,
.cat-cta,
button[type="submit"],
input[type="submit"],
.cx-form button[type="submit"],
.sol-builder-form button[type="submit"] {
  background: var(--cx-green) !important;
  border: 1px solid var(--cx-green) !important;
  color: #0b1711 !important;
}

.btn-primary:hover,
.primary-btn:hover,
.hero-btn-primary:hover,
.cat-cta:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--cx-green-strong) !important;
  border-color: var(--cx-green-strong) !important;
  color: #06110c !important;
  transform: translateY(-1px) !important;
}

.btn-outline,
.btn-outline-sm,
.btn-ghost,
.hero-btn-secondary,
.model-card-link,
.card-link-text {
  background: transparent !important;
  border: 1px solid var(--cx-line) !important;
  color: var(--cx-ink) !important;
}

.btn-outline:hover,
.btn-outline-sm:hover,
.btn-ghost:hover,
.hero-btn-secondary:hover,
.model-card-link:hover {
  background: var(--cx-green-soft) !important;
  border-color: rgba(57,170,120,.42) !important;
  color: #0f5e41 !important;
}

.hero .btn-outline,
.hero .btn-outline-sm,
.hero .btn-ghost,
.ptz-hero .btn-outline,
.ptz-hero .btn-ghost,
.events-hero .btn-outline,
.events-hero .btn-ghost,
.about-hero .btn-outline,
.about-hero .btn-ghost,
.sol-hero .btn-outline,
.sol-hero .btn-ghost {
  border-color: rgba(255,255,255,.58) !important;
  color: #fff !important;
}

.hero .btn-outline:hover,
.hero .btn-ghost:hover,
.ptz-hero .btn-outline:hover,
.ptz-hero .btn-ghost:hover,
.events-hero .btn-outline:hover,
.events-hero .btn-ghost:hover,
.about-hero .btn-outline:hover,
.about-hero .btn-ghost:hover,
.sol-hero .btn-outline:hover,
.sol-hero .btn-ghost:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: #fff !important;
  color: #fff !important;
}

.product-card,
.commerce-card,
.model-card,
.ptz-cat-card,
.solution-card,
.event-card,
.news-card,
.gallery-card,
.value-card,
.val-card,
.trust-card,
.support-card,
.why-card,
.why-ptz-card,
.team-card,
.arch-card,
.eco-card,
.i-card,
.tl-card,
.vm-card,
.pillar-card,
.cs-card,
.cb-card,
.cv-card,
.ws-card,
.social-hub-card,
.faq-item {
  background: var(--cx-paper) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: var(--cx-radius) !important;
  box-shadow: none !important;
  color: var(--cx-ink) !important;
}

.product-card:hover,
.commerce-card:hover,
.model-card:hover,
.ptz-cat-card:hover,
.solution-card:hover,
.event-card:hover,
.news-card:hover,
.gallery-card:hover,
.value-card:hover,
.val-card:hover,
.i-card:hover,
.social-hub-card:hover {
  border-color: rgba(57,170,120,.38) !important;
  box-shadow: var(--cx-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

.product-card h3,
.commerce-card h3,
.model-card h3,
.ptz-cat-card h3,
.solution-card h3,
.event-card h3,
.news-card h3,
.gallery-card h3,
.value-card h3,
.val-card h3,
.trust-card h4,
.support-card h3,
.why-card h3,
.why-ptz-card h3,
.team-card h3,
.arch-card h3,
.eco-card h3,
.i-card h3,
.tl-card h3,
.vm-card h3,
.pillar-card h3,
.cs-card h3,
.cb-card h3,
.cv-card h3,
.faq-question {
  color: var(--cx-ink) !important;
}

.product-card p,
.commerce-card p,
.model-card p,
.ptz-cat-card p,
.solution-card p,
.event-card p,
.news-card p,
.gallery-card p,
.value-card p,
.val-card p,
.trust-card p,
.support-card p,
.why-card p,
.why-ptz-card p,
.team-card p,
.arch-card p,
.eco-card p,
.i-card p,
.tl-card p,
.vm-card p,
.pillar-card p,
.cs-card p,
.cb-card p,
.cv-card p,
.faq-answer {
  color: var(--cx-body) !important;
}

.product-card img,
.commerce-card img,
.model-card img,
.ptz-cat-card img,
.gallery-card img,
.event-card img {
  border-radius: calc(var(--cx-radius) - 2px) !important;
}

.product-image,
.product-img,
.prod-img-wrap,
.model-card-img,
.ptz-img-frame,
.event-card-img,
.card-cover-wrap {
  background: #ece8de !important;
  border-color: var(--cx-line) !important;
  border-radius: var(--cx-radius) !important;
}

.cat-tabs,
.cat-tabs-inner,
.filter-section,
.lineup-filter-group,
.sol-filter-container,
.brand-filter-tabs {
  background: #161616 !important;
  border-color: rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  color: #fff !important;
}

.cat-tab,
.wf-tab,
.cat-tab-btn,
.lineup-filter-btn,
.sol-filter-btn,
.brand-tab {
  min-height: 38px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  color: #d6d7d3 !important;
  background: transparent !important;
}

.cat-tab:hover,
.wf-tab:hover,
.cat-tab-btn:hover,
.lineup-filter-btn:hover,
.sol-filter-btn:hover,
.brand-tab:hover,
.cat-tab.active,
.wf-tab.active,
.cat-tab-btn.active,
.lineup-filter-btn.active,
.lineup-filter-btn.active-filter,
.sol-filter-btn.active,
.brand-tab.active {
  background: rgba(88,201,155,.14) !important;
  border-color: rgba(88,201,155,.35) !important;
  color: #fff !important;
}

.cx-form,
.contact-form,
.contact-form-new,
.contact-form-eizo,
.sol-builder-form,
.form-wrap,
.lead-form-wrap,
.experience-form-shell,
.sol-form-container {
  background: var(--cx-paper) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: var(--cx-radius-lg) !important;
  box-shadow: var(--cx-shadow) !important;
  color: var(--cx-ink) !important;
}

.form-section,
.form-block,
.form-section-group {
  background: transparent !important;
  border-color: var(--cx-line) !important;
}

.cx-form label,
.contact-form label,
.contact-form-new label,
.contact-form-eizo label,
.sol-builder-form label,
.form-wrap label,
.lead-form-wrap label,
.form-sublabel {
  color: #3e443d !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.cx-form input:not([type="checkbox"]):not([type="radio"]),
.cx-form select,
.cx-form textarea,
.contact-form input:not([type="checkbox"]):not([type="radio"]),
.contact-form select,
.contact-form textarea,
.contact-form-new input:not([type="checkbox"]):not([type="radio"]),
.contact-form-new select,
.contact-form-new textarea,
.contact-form-eizo input:not([type="checkbox"]):not([type="radio"]),
.contact-form-eizo select,
.contact-form-eizo textarea,
.sol-builder-form input:not([type="checkbox"]):not([type="radio"]),
.sol-builder-form select,
.sol-builder-form textarea,
.form-wrap input:not([type="checkbox"]):not([type="radio"]),
.form-wrap select,
.form-wrap textarea,
.lead-form-wrap input:not([type="checkbox"]):not([type="radio"]),
.lead-form-wrap select,
.lead-form-wrap textarea {
  min-height: 44px !important;
  background: #fbfaf6 !important;
  border: 1px solid #cfc8ba !important;
  border-radius: 6px !important;
  color: var(--cx-ink) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.cx-form textarea,
.contact-form textarea,
.contact-form-new textarea,
.contact-form-eizo textarea,
.sol-builder-form textarea,
.form-wrap textarea,
.lead-form-wrap textarea {
  min-height: 120px !important;
  padding-top: 12px !important;
}

.cx-form input:focus,
.cx-form select:focus,
.cx-form textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.contact-form-new input:focus,
.contact-form-new select:focus,
.contact-form-new textarea:focus,
.sol-builder-form input:focus,
.sol-builder-form select:focus,
.sol-builder-form textarea:focus,
.form-wrap input:focus,
.form-wrap select:focus,
.form-wrap textarea:focus {
  outline: none !important;
  border-color: var(--cx-green-strong) !important;
  box-shadow: 0 0 0 3px rgba(88,201,155,.22) !important;
}

.radio-opt,
.check-opt,
.option-card {
  background: #fbfaf6 !important;
  border: 1px solid #d8d1c4 !important;
  border-radius: 6px !important;
  color: var(--cx-body) !important;
}

.definition-section,
.contact-redesigned,
.contact-section,
.contact-section-new,
.bm-contact,
.eizo-contact,
.sol-form-section,
.ptz-cta-banner,
.cta-band,
.final-cta {
  background: var(--cx-cream) !important;
  color: var(--cx-ink) !important;
}

.cta-band,
.final-cta {
  border-top: 1px solid var(--cx-line) !important;
  border-bottom: 1px solid var(--cx-line) !important;
}

.cta-band h2,
.cta-band p,
.final-cta h2,
.final-cta p {
  color: var(--cx-ink) !important;
}

.footer,
footer {
  background: var(--cx-black) !important;
  color: #c5c5bf !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

.footer h3,
.footer h4,
.footer strong,
footer h3,
footer h4,
footer strong {
  color: #fff !important;
}

.footer p,
.footer li,
.footer a,
footer p,
footer li,
footer a {
  color: #c5c5bf !important;
}

.footer a:hover,
footer a:hover {
  color: var(--cx-green) !important;
}

.footer-grid {
  gap: clamp(24px, 4vw, 56px) !important;
  align-items: start !important;
}

.footer-bottom .container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.back-to-top {
  background: var(--cx-green) !important;
  color: #0a1510 !important;
  border: 1px solid var(--cx-green) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 26px rgba(24,24,20,.16) !important;
}

body.premium-ui.page-brand-kit {
  background: #101010 !important;
  color: #e8eaed !important;
}

body.premium-ui.page-brand-kit .page {
  background: #151515 !important;
  border-color: rgba(88,201,155,.34) !important;
}

body.premium-ui.page-brand-kit .logo-placeholder {
  display: block !important;
  margin: 0 0 10px !important;
  color: var(--cx-green) !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
}

body.premium-ui.page-brand-kit .section-title,
body.premium-ui.page-brand-kit .color-name,
body.premium-ui.page-brand-kit .color-hex,
body.premium-ui.page-brand-kit .specimen-label,
body.premium-ui.page-brand-kit .specimen-large,
body.premium-ui.page-brand-kit .specimen-body {
  color: #e8eaed !important;
}

.event-popup-card,
.sol-modal-content,
.modal-content,
.album-shell {
  background: var(--cx-paper) !important;
  color: var(--cx-ink) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: var(--cx-radius-lg) !important;
}

.event-popup-card p,
.sol-modal-content p,
.sol-modal-content li,
.modal-content p {
  color: var(--cx-body) !important;
}

@media (max-width: 1100px) {
  .nav-container {
    grid-template-columns: 1fr auto !important;
  }

  .nav-cta {
    display: none !important;
  }

  .hamburger {
    display: inline-flex !important;
    justify-self: end !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .nav-links {
    position: fixed !important;
    top: var(--cx-header) !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    height: auto !important;
    padding: 16px 24px 22px !important;
    background: #151515 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }

  .nav-links.open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .nav-link,
  .nav-brands-link {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  .mega-dropdown {
    position: static !important;
    width: 100% !important;
    display: none !important;
    padding: 6px 0 14px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .brands-open .mega-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .mega-brand-grid {
    grid-template-columns: 1fr !important;
  }

  .mega-brand {
    border-right: 0 !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
}

@media (max-width: 720px) {
  .container,
  .section-shell,
  .section-header,
  .events-section-header,
  .contact-grid-new,
  .contact-grid-eizo,
  .lead-grid,
  .contact-support-grid,
  .sol-filter-container,
  .sol-form-container,
  .eizo-brand-inner,
  .nav-container,
  .footer .container {
    width: min(calc(100% - 32px), var(--cx-container)) !important;
  }

  section:not(.hero):not(.ptz-hero):not(.events-hero):not(.about-hero):not(.sol-hero):not(.page-404) {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .hero,
  .ptz-hero,
  .events-hero,
  .about-hero,
  .sol-hero {
    min-height: 560px !important;
  }

  body.premium-ui h1,
  .hero-headline,
  .ptz-hero-title,
  .events-hero h1,
  .about-hero .hero-title,
  .sol-hero h1 {
    font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
    line-height: 1.04 !important;
  }

  .section-title,
  body.premium-ui h2.section-title {
    font-size: clamp(1.8rem, 9vw, 2.45rem) !important;
  }

  .hero-actions > *,
  .cta-actions > *,
  .final-cta-btns > *,
  .sol-hero-actions > * {
    width: 100% !important;
  }

  .footer-bottom .container {
    justify-content: flex-start !important;
  }
}

/* ---------- Home page section corrections ---------- */
body.page-index .ptz-spotlight-section {
  padding: clamp(64px, 6vw, 84px) 0 !important;
  background: #151615 !important;
  color: #fff !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.page-index .ptz-spotlight-section::before {
  display: none !important;
}

body.page-index .ptz-spotlight-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr) !important;
  align-items: center !important;
  gap: clamp(44px, 6vw, 84px) !important;
}

body.page-index .ptz-spotlight-grid > * {
  min-width: 0 !important;
}

body.page-index .ptz-spotlight-content {
  max-width: 700px !important;
}

body.page-index .ptz-spotlight-content .brand-announcement-tag {
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #8de0bc !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

body.page-index .ptz-spotlight-content h2 {
  max-width: 650px !important;
  margin: 0 0 18px !important;
  color: #fff !important;
  font-size: clamp(2.35rem, 4vw, 3.65rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

body.page-index .ptz-spotlight-content h2 .text-accent {
  color: var(--cx-green) !important;
}

body.page-index .ptz-spotlight-content > p {
  max-width: 680px !important;
  margin: 0 0 24px !important;
  color: #c8cbc7 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

body.page-index .ptz-spotlight-content > p strong {
  color: #fff !important;
}

body.page-index .ptz-feature-tags {
  margin: 0 0 28px !important;
  gap: 9px !important;
}

body.page-index .ptz-ft-tag {
  min-height: 38px !important;
  padding: 0 13px !important;
  background: #202220 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 6px !important;
  color: #f1f2ef !important;
  font-size: 12.5px !important;
}

body.page-index .ptz-spotlight-content .hero-actions {
  margin-top: 0 !important;
}

body.page-index .ptz-spotlight-card {
  width: 100% !important;
  padding: clamp(28px, 3vw, 38px) !important;
  background: var(--cx-paper) !important;
  color: var(--cx-ink) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.2) !important;
}

body.page-index .ptz-spotlight-logo {
  display: block !important;
  width: min(230px, 68%) !important;
  height: auto !important;
  margin: 0 0 24px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

body.page-index .ptz-spotlight-card h3 {
  margin: 0 0 12px !important;
  color: var(--cx-ink) !important;
  font-size: clamp(1.25rem, 2vw, 1.55rem) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body.page-index .ptz-spotlight-card p {
  margin: 0 0 24px !important;
  color: var(--cx-body) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

body.page-index .ptz-spotlight-card .btn-outline-sm {
  width: auto !important;
  color: var(--cx-ink) !important;
  background: transparent !important;
  border-color: #aaa598 !important;
}

body.page-index .ptz-spotlight-card .btn-outline-sm:hover {
  color: #0c1711 !important;
  background: var(--cx-green) !important;
  border-color: var(--cx-green) !important;
}

body.page-index .contact-redesigned {
  padding: clamp(72px, 7vw, 96px) 0 !important;
  background: var(--cx-cream) !important;
}

body.page-index .contact-grid-new {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr) !important;
  align-items: start !important;
  gap: clamp(44px, 6vw, 76px) !important;
}

body.page-index .contact-form-new {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(26px, 3vw, 36px) !important;
  background: var(--cx-paper) !important;
  border: 1px solid var(--cx-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 38px rgba(24,24,20,.07) !important;
}

body.page-index .form-title-new {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  margin: 0 0 24px !important;
  color: var(--cx-ink) !important;
  font-size: 1.45rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

body.page-index .form-title-new::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  background: var(--cx-green);
  border-radius: 2px;
}

body.page-index .contact-form-new .cx-form,
body.page-index .contact-form-new #contact-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.page-index .contact-form-new .form-row-new {
  gap: 16px !important;
}

body.page-index .contact-form-new .form-group-new {
  margin-bottom: 14px !important;
}

body.page-index .contact-form-new label {
  margin-bottom: 7px !important;
  color: #444841 !important;
}

body.premium-ui.page-index .contact-form-new .cx-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.premium-ui.page-index .contact-form-new .cx-form select,
body.premium-ui.page-index .contact-form-new .cx-form textarea {
  width: 100% !important;
  min-width: 0 !important;
  background: #fff !important;
  border: 1px solid #cfc8ba !important;
  border-radius: 6px !important;
  color: var(--cx-ink) !important;
}

body.premium-ui.page-index .contact-form-new .cx-form input::placeholder,
body.premium-ui.page-index .contact-form-new .cx-form textarea::placeholder {
  color: #8b8d87 !important;
}

body.premium-ui.page-index .contact-form-new .cx-form input:focus,
body.premium-ui.page-index .contact-form-new .cx-form select:focus,
body.premium-ui.page-index .contact-form-new .cx-form textarea:focus {
  background: #fff !important;
  border-color: var(--cx-green-strong) !important;
  box-shadow: 0 0 0 3px rgba(88,201,155,.18) !important;
}

body.premium-ui.page-index .contact-form-new .cx-form > button#submit-btn {
  min-width: 168px !important;
  margin: 6px 0 0 0 !important;
}

@media (max-width: 900px) {
  body.page-index .ptz-spotlight-grid,
  body.page-index .contact-grid-new {
    grid-template-columns: 1fr !important;
  }

  body.page-index .ptz-spotlight-content,
  body.page-index .ptz-spotlight-card {
    max-width: 720px !important;
  }

  body.page-index .contact-grid-new {
    gap: 36px !important;
  }
}

@media (max-width: 560px) {
  body.page-index .ptz-spotlight-card,
  body.page-index .contact-form-new {
    padding: 22px 18px !important;
  }

  body.page-index .ptz-feature-tags {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body.page-index .ptz-ft-tag {
    width: 100% !important;
  }

  body.page-index .contact-form-new .submit-btn-new {
    width: 100% !important;
  }
}

/* Bundled source: custom.css */
/* CUSTOM EDIT — ONE FILE FOR ALL 14 PAGES | Edit here, save, hard-refresh ?v=CUSTOM
   No need to touch HTML or site-theme.js — all boxes/top/bottom/alignment use variables below
   VS Code: Open this file, change value, Save (Cmd+S), browser Cmd+Shift+R
*/
:root {
  /* === BOXES — all 55 cards (product, trust, support, eco, why-ptz, etc) === */
  --edit-box-padding: 24px;          /* inside each box — try 20px | 28px */
  --edit-box-gap: 20px;              /* gap between boxes in a grid — try 16px | 24px */
  --edit-box-radius: 14px;           /* corner round — try 8px | 16px | 0 for square */
  --edit-box-border: 1px solid var(--cx-line);
  --edit-box-shadow: var(--cx-shadow);
  --edit-box-min-height: 178px;      /* equal height — all boxes same tall */

  /* === TOP / BOTTOM — every section === */
  --edit-section-padding-top: 72px;      /* top of each section — try 48px | 96px */
  --edit-section-padding-bottom: 72px;   /* bottom — try 48px | 96px */
  --edit-section-gap: 20px;              /* gap between title → cards → text */
  --edit-hero-padding-top: 88px;         /* hero top — try 72px */
  --edit-hero-padding-bottom: 72px;      /* hero bottom */

  /* === ALIGNMENT — left | center | right === */
  --edit-box-text-align: left;           /* text inside boxes — left is most readable */
  --edit-grid-align: stretch;            /* boxes stretch equal — use start for top-aligned */
  --edit-section-align: left;            /* hero/section titles — left matches H1 left design */
  --edit-cta-align: flex-start;          /* CTA buttons — flex-start left | center | flex-end right */

  /* === GRIDS — 43 grids === */
  --edit-grid-gap: 20px;

  /* === IMAGES — inside cards === */
  --edit-img-fit: contain;               /* contain = not cropped | cover = fills */
  --edit-img-max-height: 220px;
}

/* ——— Top/Bottom ——— */
html[data-camixel-theme] body.premium-ui section:not(.hero):not(.hero-section):not(.ptz-hero):not(.events-hero):not(.sol-hero):not(.cat-hero):not(.about-hero):not(.ewaste-hero) {
  padding-top: var(--edit-section-padding-top) !important;
  padding-bottom: var(--edit-section-padding-bottom) !important;
}
html[data-camixel-theme] body.premium-ui .hero-content,
html[data-camixel-theme] body.premium-ui .ptz-hero-content { padding-top: var(--edit-hero-padding-top) !important; padding-bottom: var(--edit-hero-padding-bottom) !important; }

/* ——— Boxes ——— */
html[data-camixel-theme] body.premium-ui :where(
  .vm-card,.pillar-card,.trust-card,.support-card,.i-card,.value-card,.val-card,
  .why-ptz-card,.eco-card,.product-card,.model-card,.ptz-cat-card,.advantage-point,
  .arch-card,.brand-card,.cs-card,.cv-card,.team-card,
  .about-vm-box,.vision-box,.mission-box,.guideline-box,.trust-statement-box
) {
  padding: var(--edit-box-padding) !important;
  border-radius: var(--edit-box-radius) !important;
  border: var(--edit-box-border) !important;
  box-shadow: var(--edit-box-shadow) !important;
  min-height: var(--edit-box-min-height) !important;
  text-align: var(--edit-box-text-align) !important;
  display: flex !important; flex-direction: column !important; height: 100% !important;
}

/* ——— Alignment ——— */
html[data-camixel-theme] body.premium-ui :where(
  .vm-cards-grid,.pillars-grid,.trust-grid,.eco-grid,.why-ptz-grid,.advantage-grid,
  .cat-products-grid,.models-grid,.ptz-categories-grid,.industries-mega-grid,.i-grid
) {
  gap: var(--edit-grid-gap) !important;
  align-items: var(--edit-grid-align) !important;
}
html[data-camixel-theme] body.premium-ui .section-header,
html[data-camixel-theme] body.premium-ui .hero-content { text-align: var(--edit-section-align) !important; }
html[data-camixel-theme] body.premium-ui .section-header.text-center,
html[data-camixel-theme] body.premium-ui .text-center.section-header,
html[data-camixel-theme] body.premium-ui .events-section-header,
html[data-camixel-theme] body.premium-ui .events-hero-content {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
html[data-camixel-theme] body.premium-ui .section-header.text-center :where(h2,.section-title,.section-desc,.section-sub,p),
html[data-camixel-theme] body.premium-ui .text-center.section-header :where(h2,.section-title,.section-desc,.section-sub,p),
html[data-camixel-theme] body.premium-ui .events-section-header :where(h2,p) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
html[data-camixel-theme] body.premium-ui .hero-actions,
html[data-camixel-theme] body.premium-ui .cta-row,
html[data-camixel-theme] body.premium-ui .final-cta-btns { justify-content: var(--edit-cta-align) !important; }

/* ——— Images ——— */
html[data-camixel-theme] body.premium-ui :where(.prod-img-wrap img,.model-card-img img,.ptz-img-frame img) {
  object-fit: var(--edit-img-fit) !important; max-height: var(--edit-img-max-height) !important;
}
/* Integrated Solution BG — uses root img/images__integrated-solution-bg.jpg */
/* NOTE: background goes on .sol-hero-bg (absolute child), NOT .sol-hero (parent) */
/* because camixel-catalogue.css:748 sets solid #171717 on .sol-hero which blocks images */
html[data-camixel-theme] body.premium-ui .sol-hero {
  position: relative !important;
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden !important;
}
html[data-camixel-theme] body.premium-ui .sol-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background:
    linear-gradient(rgba(5,7,10,.68), rgba(5,7,10,.68)),
    url("img/images__integrated-solution-bg.jpg") center / cover no-repeat !important;
  z-index: 0 !important;
}
html[data-camixel-theme] body.premium-ui .sol-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at center, rgba(88,201,155,.10) 0%, transparent 70%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Keep the desktop brand chooser inside the viewport and easy to scan. */
@media (min-width: 1101px) {
  html[data-camixel-theme] body.premium-ui .mega-dropdown {
    width: min(720px, calc(100vw - 32px)) !important;
    max-width: 720px !important;
  }
  html[data-camixel-theme] body.premium-ui .mega-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html[data-camixel-theme] body.premium-ui .mega-brand {
    min-height: 150px !important;
  }
  html[data-camixel-theme] body.premium-ui .mega-logo-stage {
    height: 76px !important;
    min-height: 76px !important;
  }
}

/* On compact headers, one clear CTA plus the menu button fits without clipping. */
@media (max-width: 1100px) {
  html[data-camixel-theme] body.premium-ui .nav-cta .nav-cta-secondary {
    display: none !important;
  }
  html[data-camixel-theme] body.premium-ui .nav-container {
    min-width: 0 !important;
  }
  html[data-camixel-theme] body.premium-ui .nav-logo,
  html[data-camixel-theme] body.premium-ui .nav-cta {
    min-width: 0 !important;
  }
  html[data-camixel-theme] body.premium-ui .hamburger {
    margin-left: 0 !important;
    flex: 0 0 44px !important;
  }
}

@media (max-width: 420px) {
  html[data-camixel-theme] body.premium-ui .nav-cta-link {
    padding-inline: 11px !important;
  }
  html[data-camixel-theme] body.premium-ui .site-logo-header {
    max-width: 112px !important;
  }
}

@media (max-width: 340px) {
  html[data-camixel-theme] body.premium-ui .nav-cta {
    display: none !important;
  }
}

/* =========================================================
   HERO + CTA SYSTEM
   Loaded last to resolve the competing legacy/theme rules.
   ========================================================= */

html[data-camixel-theme] body.premium-ui :is(
  section.hero,
  section.ptz-hero,
  section.events-hero,
  section.sol-hero,
  section.about-hero,
  section.ewaste-hero
) {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: max(640px, calc(100svh - var(--cx-header))) !important;
  max-height: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  isolation: isolate;
}

/* News & Activities uses a dedicated root-level editorial background. */
html[data-camixel-theme] body.page-events.premium-ui section.events-hero {
  background-color: #020617 !important;
  background-image:
    linear-gradient(180deg, rgba(2, 6, 23, .10) 0%, rgba(2, 6, 23, .80) 100%),
    url("img/images__news-activities-hero-bg.png") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Hero media must fill the stage instead of changing the stage height. */
html[data-camixel-theme] body.premium-ui :is(
  .hero-bg-wrapper,
  .hero-slide,
  .hero-video-bg,
  .ptz-hero-video-bg,
  .about-hero-bg,
  .ewaste-hero-bg,
  .sol-hero-bg,
  .events-hero > video
) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
}

html[data-camixel-theme] body.premium-ui :is(
  .hero-overlay,
  .hero-grid-overlay,
  .hero-mesh-glow,
  .ptz-hero-overlay-fade
) {
  pointer-events: none !important;
}

/* Left-aligned product and service heroes use the same page container. */
html[data-camixel-theme] body.premium-ui :is(.hero-content,.ptz-hero-content) {
  position: relative !important;
  z-index: 3 !important;
  width: min(calc(100% - 64px), var(--cx-container)) !important;
  max-width: var(--cx-container) !important;
  min-height: inherit !important;
  margin: 0 auto !important;
  padding: clamp(72px, 8vw, 112px) 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 16px !important;
  text-align: left !important;
}

html[data-camixel-theme] body.premium-ui .ptz-hero > .container {
  position: relative !important;
  z-index: 3 !important;
  width: min(calc(100% - 64px), var(--cx-container)) !important;
  max-width: var(--cx-container) !important;
  min-height: inherit !important;
  margin-inline: auto !important;
}

html[data-camixel-theme] body.premium-ui .ptz-hero .ptz-hero-content {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 0 !important;
}

html[data-camixel-theme] body.premium-ui :is(
  .hero-content-slide.active,
  .hero-content > .hero-copy,
  .hero-content > .hero-text
) {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
}

html[data-camixel-theme] body.premium-ui :is(
  .hero-headline,
  .ptz-hero-title,
  .sol-hero h1,
  .about-hero .hero-title,
  .events-hero h1
) {
  max-width: 760px !important;
  margin: 0 !important;
  font-size: clamp(2.75rem, 4.8vw, 4.5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.052em !important;
  text-wrap: balance;
}

html[data-camixel-theme] body.premium-ui :is(
  .hero-sub,
  .hero-subtitle,
  .ptz-hero-content > p,
  .sol-hero-copy > p,
  .events-hero-content > p
) {
  width: min(100%, 680px) !important;
  max-width: 680px !important;
  margin: 0 !important;
  color: #d0d5d2 !important;
  font-size: clamp(1rem, 1.25vw, 1.15rem) !important;
  line-height: 1.62 !important;
}

/* Editorial heroes remain intentionally centered. */
html[data-camixel-theme] body.premium-ui :is(.events-hero-content,.about-hero .hero-inner) {
  position: relative !important;
  z-index: 3 !important;
  width: min(calc(100% - 64px), 900px) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: clamp(72px, 8vw, 112px) 0 !important;
  text-align: center !important;
}

html[data-camixel-theme] body.premium-ui :is(.events-hero-content,.about-hero .hero-inner) :is(h1,p) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* E-waste is a left-aligned editorial hero; keep all copy on one axis. */
html[data-camixel-theme] body.premium-ui .ewaste-hero > .container {
  position: relative !important;
  z-index: 3 !important;
  width: min(calc(100% - 64px), var(--cx-container)) !important;
  max-width: var(--cx-container) !important;
  margin-inline: auto !important;
  padding: clamp(72px, 8vw, 112px) 0 !important;
  text-align: left !important;
}

html[data-camixel-theme] body.premium-ui .ewaste-hero :is(.hero-pill,.hero-headline,.hero-sub) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Solutions keeps its two-column composition but shares the same bounds. */
html[data-camixel-theme] body.premium-ui .sol-hero-content {
  position: relative !important;
  z-index: 3 !important;
  width: min(calc(100% - 64px), var(--cx-container)) !important;
  max-width: var(--cx-container) !important;
  min-height: inherit !important;
  margin-inline: auto !important;
  padding: clamp(72px, 8vw, 112px) 0 !important;
  align-items: center !important;
}

/* Every major CTA uses a consistent touch target and never fades out. */
html[data-camixel-theme] body.premium-ui :is(
  .hero-actions,
  .sol-hero-actions,
  .cta-actions,
  .cta-row,
  .final-cta-btns,
  .section-actions
) {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 12px 0 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

html[data-camixel-theme] body.premium-ui :is(
  .hero-actions,
  .sol-hero-actions,
  .cta-actions,
  .cta-row,
  .final-cta-btns,
  .section-actions
) :is(a,button,.btn) {
  min-width: 148px !important;
  min-height: 50px !important;
  max-width: 100% !important;
  padding: 0 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

/* Secondary hero buttons remain legible over photography and video. */
html[data-camixel-theme] body.premium-ui :is(
  section.hero,
  section.ptz-hero,
  section.sol-hero
) :is(.btn-ghost,.btn-outline) {
  color: #fff !important;
  background: rgba(5, 9, 7, .48) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Final CTA bands are centered even though normal section CTAs are left-aligned. */
html[data-camixel-theme] body.premium-ui :is(.final-cta,.ptz-cta-banner,.cta-band,.cta-section) {
  text-align: center !important;
}

html[data-camixel-theme] body.premium-ui :is(
  .final-cta-btns,
  .ptz-cta-banner .hero-actions,
  .cta-band .cta-actions,
  .cta-section .cta-actions
) {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html[data-camixel-theme] body.premium-ui :is(.final-cta,.ptz-cta-banner,.cta-band,.cta-section) :is(h2,p) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

@media (max-width: 820px) {
  html[data-camixel-theme] body.premium-ui :is(
    section.hero,
    section.ptz-hero,
    section.events-hero,
    section.sol-hero,
    section.about-hero,
    section.ewaste-hero
  ) {
    min-height: max(620px, calc(100svh - var(--cx-header))) !important;
  }

  html[data-camixel-theme] body.premium-ui :is(.hero-content,.ptz-hero-content),
  html[data-camixel-theme] body.premium-ui .ptz-hero > .container,
  html[data-camixel-theme] body.premium-ui .sol-hero-content,
  html[data-camixel-theme] body.premium-ui .ewaste-hero > .container,
  html[data-camixel-theme] body.premium-ui :is(.events-hero-content,.about-hero .hero-inner) {
    width: min(calc(100% - 32px), var(--cx-container)) !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  html[data-camixel-theme] body.premium-ui .sol-hero-content {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
  }

  html[data-camixel-theme] body.premium-ui :is(
    .hero-headline,
    .ptz-hero-title,
    .sol-hero h1,
    .about-hero .hero-title,
    .events-hero h1
  ) {
    font-size: clamp(2.15rem, 9vw, 3.35rem) !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 640px) {
  html[data-camixel-theme] body.premium-ui :is(
    .hero-actions,
    .sol-hero-actions,
    .cta-actions,
    .cta-row,
    .final-cta-btns,
    .section-actions
  ) {
    width: 100% !important;
    align-items: stretch !important;
  }

  html[data-camixel-theme] body.premium-ui :is(
    .hero-actions,
    .sol-hero-actions,
    .cta-actions,
    .cta-row,
    .final-cta-btns,
    .section-actions
  ) :is(a,button,.btn) {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
}

/* =========================================================
   HOMEPAGE ANSWER + CONVERSION HUB
   A concise, entity-rich buyer guide for people and answer engines.
   ========================================================= */

html[data-camixel-theme] body.page-index .answer-hub-section {
  background:
    radial-gradient(circle at 15% 10%, rgba(92, 184, 144, .10), transparent 38%),
    linear-gradient(180deg, #0b100e 0%, #080b0a 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

html[data-camixel-theme] body.page-index .answer-hub-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: end;
  margin-bottom: 34px;
}

html[data-camixel-theme] body.page-index .answer-hub-head .section-title {
  max-width: 720px;
  margin-bottom: 0 !important;
}

html[data-camixel-theme] body.page-index .answer-hub-intro {
  max-width: 760px;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.75;
}

html[data-camixel-theme] body.page-index .answer-hub-intro strong {
  color: var(--text-primary);
}

html[data-camixel-theme] body.page-index .answer-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--edit-box-gap);
  align-items: stretch;
}

html[data-camixel-theme] body.page-index .answer-card {
  min-width: 0;
  min-height: 330px;
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(155deg, rgba(20, 28, 24, .96), rgba(10, 14, 12, .98));
  border: 1px solid rgba(134, 216, 177, .16);
  border-radius: var(--edit-box-radius);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}

html[data-camixel-theme] body.page-index .answer-card-number {
  color: var(--green);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
}

html[data-camixel-theme] body.page-index .answer-card h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1.2;
}

html[data-camixel-theme] body.page-index .answer-card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
}

html[data-camixel-theme] body.page-index .answer-card-links {
  width: 100%;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-camixel-theme] body.page-index .answer-card-links a {
  padding: 8px 11px;
  color: var(--text-primary);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
}

html[data-camixel-theme] body.page-index .answer-card-links a:hover,
html[data-camixel-theme] body.page-index .answer-card-links a:focus-visible {
  color: #07110c;
  background: var(--green);
  border-color: var(--green);
}

html[data-camixel-theme] body.page-index .answer-card-cta {
  margin-top: auto;
  color: var(--green);
  font-size: .9rem;
  font-weight: 800;
  text-decoration: none;
}

html[data-camixel-theme] body.page-index .answer-proof-row {
  margin-top: 20px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  gap: 18px;
  align-items: center;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--edit-box-radius);
}

html[data-camixel-theme] body.page-index .answer-proof-row > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

html[data-camixel-theme] body.page-index .answer-proof-row strong {
  color: var(--green);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
}

html[data-camixel-theme] body.page-index .answer-proof-row span {
  color: var(--text-muted);
  font-size: .78rem;
  letter-spacing: .04em;
}

html[data-camixel-theme] body.page-index .answer-proof-row .btn {
  min-height: 50px;
  white-space: normal;
  text-align: center;
}

@media (max-width: 900px) {
  html[data-camixel-theme] body.page-index .answer-hub-head,
  html[data-camixel-theme] body.page-index .answer-hub-grid {
    grid-template-columns: 1fr;
  }

  html[data-camixel-theme] body.page-index .answer-card {
    min-height: 0;
  }

  html[data-camixel-theme] body.page-index .answer-proof-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-camixel-theme] body.page-index .answer-proof-row .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 520px) {
  html[data-camixel-theme] body.page-index .answer-proof-row {
    grid-template-columns: 1fr;
  }

  html[data-camixel-theme] body.page-index .answer-proof-row .btn {
    grid-column: auto;
  }
}

/* The global section-spacing rule has a very specific :not() chain. */
html[data-camixel-theme] body.premium-ui section#main-content:is(
  .hero,
  .ptz-hero,
  .events-hero,
  .sol-hero,
  .about-hero,
  .ewaste-hero
) {
  padding: 0 !important;
}

@media (min-width: 821px) {
  html[data-camixel-theme] body.premium-ui section#main-content:is(
    .hero,
    .ptz-hero,
    .events-hero,
    .sol-hero,
    .about-hero,
    .ewaste-hero
  ) {
    height: clamp(720px, calc(100svh - var(--cx-header)), 840px) !important;
    min-height: clamp(720px, calc(100svh - var(--cx-header)), 840px) !important;
    max-height: 840px !important;
  }
}

@media (max-width: 820px) {
  html[data-camixel-theme] body.premium-ui .ptz-hero > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   BLACKMAGIC VIDEO REPAIR
   The source clip has baked-in letterboxing and is intentionally scaled.
   Restore true centering after the global full-bleed media rule above.
   ========================================================= */

html[data-camixel-theme] body.page-blackmagic .hero .hero-video-bg {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: translate(-50%, -50%) scale(1.35) !important;
}

/* =========================================================
   RESPONSIVE CARD + PRODUCT BOX SYSTEM
   Gives every card reliable sizing, then applies one shared product-card
   layout to Blackmagic, EIZO, EIZO Medical and PTZOptics catalogues.
   ========================================================= */

html[data-camixel-theme] body.premium-ui :where(
  .vm-card,.pillar-card,.trust-card,.support-card,.i-card,.value-card,.val-card,
  .why-ptz-card,.eco-card,.product-card,.model-card,.ptz-cat-card,.advantage-point,
  .arch-card,.brand-card,.cs-card,.cv-card,.team-card,.benefit-card,.why-card,
  .cb-card,.color-card,.solution-card,.warranty-card,.ws-card,.tl-card,.gallery-card,
  .social-hub-card,.ptz-spotlight-card,.about-vm-box,.vision-box,.mission-box,
  .guideline-box,.trust-statement-box
) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

html[data-camixel-theme] body.premium-ui :where(
  .vm-cards-grid,.pillars-grid,.trust-grid,.support-grid,.i-grid,.values-grid,
  .val-grid,.why-ptz-grid,.eco-grid,.advantage-grid,.arch-grid,.cs-grid,.cv-grid,
  .team-grid,.why-grid,.cb-grid,.color-grid,.solutions-grid,.warranty-grid,
  .gallery-grid,.ptz-spotlight-grid
) {
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
}

/* Product grids stay complete and readable instead of becoming clipped sliders. */
html[data-camixel-theme] body.premium-ui :is(
  .cat-products-grid,
  .models-grid:has(> .model-card),
  .ptz-categories-grid
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: var(--edit-box-gap) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

html[data-camixel-theme] body.premium-ui :is(
  .product-card,
  .model-card,
  .ptz-cat-card
) {
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  background: linear-gradient(155deg, rgba(20, 27, 24, .98), rgba(10, 14, 12, .98)) !important;
  border: 1px solid rgba(134, 216, 177, .16) !important;
  border-radius: var(--edit-box-radius) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18) !important;
  overflow: hidden !important;
  scroll-snap-align: none !important;
}

html[data-camixel-theme] body.premium-ui :is(
  .product-card,
  .model-card,
  .ptz-cat-card
):hover {
  border-color: rgba(134, 216, 177, .42) !important;
  transform: translateY(-3px) !important;
}

/* A fixed-ratio media stage keeps mixed product artwork aligned by row. */
html[data-camixel-theme] body.premium-ui :is(
  .product-card > .prod-img-wrap,
  .model-card > .model-card-img,
  .ptz-cat-card > .ptz-img-frame
) {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  background: radial-gradient(circle at 50% 45%, rgba(134, 216, 177, .10), transparent 68%) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  overflow: hidden !important;
}

html[data-camixel-theme] body.premium-ui :is(
  .product-card > .prod-img-wrap,
  .model-card > .model-card-img,
  .ptz-cat-card > .ptz-img-frame
) > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 92% !important;
  max-height: var(--edit-img-max-height) !important;
  margin: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Blackmagic cards have a direct title; EIZO cards use a body wrapper. */
html[data-camixel-theme] body.premium-ui .product-card > :is(h3,h4) {
  width: 100% !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 18px 20px 20px !important;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  line-height: 1.35 !important;
}

html[data-camixel-theme] body.premium-ui .model-card > .model-card-body {
  width: 100% !important;
  min-height: 0 !important;
  padding: 20px !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  text-align: left !important;
}

html[data-camixel-theme] body.premium-ui .model-card-body > :is(h3,h4,p,.model-specs,.model-actions) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html[data-camixel-theme] body.premium-ui .model-card-body > p {
  flex: 1 1 auto !important;
}

html[data-camixel-theme] body.premium-ui :is(.model-actions,.model-card-link) {
  margin-top: auto !important;
}

/* PTZOptics product cards use direct children, so give them one content axis. */
html[data-camixel-theme] body.premium-ui .ptz-cat-card > :is(.vm-badge,h3,p) {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

html[data-camixel-theme] body.premium-ui .ptz-cat-card > .vm-badge {
  align-self: flex-start !important;
  margin-top: 20px !important;
}

html[data-camixel-theme] body.premium-ui .ptz-cat-card > p {
  flex: 1 1 auto !important;
}

html[data-camixel-theme] body.premium-ui .ptz-cat-card > .btn {
  width: calc(100% - 40px) !important;
  min-height: 48px !important;
  margin: auto 20px 20px !important;
  white-space: normal !important;
  text-align: center !important;
}

@media (max-width: 620px) {
  html[data-camixel-theme] body.premium-ui :is(
    .cat-products-grid,
    .models-grid:has(> .model-card),
    .ptz-categories-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-camixel-theme] body.premium-ui :is(.product-card,.model-card,.ptz-cat-card) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* The medical catalogue needs its filter column stacked before cards get tight. */
@media (max-width: 900px) {
  html[data-camixel-theme] body.page-eizo-medical .med-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
  }

  html[data-camixel-theme] body.page-eizo-medical .med-sidebar {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html[data-camixel-theme] body.page-eizo-medical .med-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Override the legacy phone carousel: complete boxes are easier to read and tap. */
@media (max-width: 640px) {
  html[data-camixel-theme] body.premium-ui :is(
    .cat-products-grid,.models-grid:has(> .model-card),.ptz-categories-grid,
    .eco-grid,.why-ptz-grid,.support-grid,.trust-grid,.pillars-grid,
    .industries-mega-grid,.i-grid,.val-grid,.values-grid,.why-grid
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  html[data-camixel-theme] body.premium-ui :is(
    .cat-products-grid > .product-card,
    .models-grid > .model-card,
    .ptz-categories-grid > .ptz-cat-card,
    .eco-grid > .eco-card,
    .why-ptz-grid > .why-ptz-card,
    .support-grid > .support-card,
    .trust-grid > .trust-card,
    .pillars-grid > .pillar-card,
    .industries-mega-grid > .industry-tile,
    .i-grid > .i-card,
    .val-grid > .val-card,
    .values-grid > .value-card,
    .why-grid > .why-card
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    height: 100% !important;
    scroll-snap-align: none !important;
  }
}