/* ================= Colour palettes =================
   <html data-pal="navy">  : deep navy, corporate
   <html data-pal="light"> : light pages, navy hero and footer
   (no attribute)          : graphite (default)               */

/* ---------- NAVY ---------- */
html[data-pal="navy"]{
  --cyc:#0A1020; --cyc-hi:#0E1628; --card:#121B30; --line:#24314B; --line2:#1A2540;
  --ink:#EEF2F7; --ink2:#AAB4C3; --mute:#7C879A; --signal:#E11D2A; --signal-hi:#BE1622; --brand:#E11D2A; --ir:#E11D2A;
  --night:#070C18; --night2:#0A1020; --nline:#1A2540; --npaper:#EEF2F7; --nmute:#7C879A;
  --stage:radial-gradient(55% 22% at 50% 86%,rgba(225,29,42,.12),transparent 72%),radial-gradient(90% 75% at 50% 26%,#1E2A44 0%,#141E34 42%,#0C1426 100%);
  --redglow:radial-gradient(70% 90% at 0% 0%,rgba(96,140,255,.07),transparent 60%),radial-gradient(55% 70% at 100% 100%,rgba(225,29,42,.07),transparent 65%);
}
html[data-pal="navy"] body{background:#0A1020}
html[data-pal="navy"] .annbar{background:#050913;border-color:rgba(148,163,184,.12)}
html[data-pal="navy"] .top,html[data-pal="navy"] .top.dark{background:rgba(7,12,24,.82)!important;border-color:rgba(148,163,184,.12)!important}
html[data-pal="navy"] .intro::before{background:radial-gradient(55% 60% at 50% 42%,#16223D 0%,#0E1730 45%,rgba(7,12,24,0) 75%),radial-gradient(40% 24% at 50% 104%,rgba(225,29,42,.14),transparent 70%)!important}
html[data-pal="navy"] .svcs,html[data-pal="navy"] .solar{background:linear-gradient(180deg,#0E1628,#0A1020)!important;border-color:rgba(148,163,184,.1)!important}
html[data-pal="navy"] .sv,html[data-pal="navy"] .card,html[data-pal="navy"] .ptile,html[data-pal="navy"] .calc,html[data-pal="navy"] .pc,html[data-pal="navy"] .ccard,html[data-pal="navy"] .sh-trust div,html[data-pal="navy"] .ls-card,html[data-pal="navy"] .ls-brands a,html[data-pal="navy"] .ls-why div,html[data-pal="navy"] .cb-empty{background:#121B30!important;border-color:rgba(148,163,184,.12)!important}
html[data-pal="navy"] .quote{background:radial-gradient(60% 90% at 100% 0%,rgba(225,29,42,.10),transparent 60%),linear-gradient(180deg,#0F1830,#0A1020)!important}
html[data-pal="navy"] .quote form.q input,html[data-pal="navy"] .quote form.q select,html[data-pal="navy"] .calc input,html[data-pal="navy"] .units{background:#070C18!important;border-color:rgba(148,163,184,.16)!important}
html[data-pal="navy"] footer#contact,html[data-pal="navy"] .sf{background:#050913!important}
html[data-pal="navy"] .pg,html[data-pal="navy"] .lt{background:#0A1020!important}
html[data-pal="navy"] .pg-hero,html[data-pal="navy"] .sh,html[data-pal="navy"] .ch{background:radial-gradient(70% 120% at 0% 0%,rgba(96,140,255,.08),transparent 60%),#0E1628!important}
html[data-pal="navy"] .cb-bar,html[data-pal="navy"] .lt .cb-bar{background:rgba(10,16,32,.86)!important}
html[data-pal="navy"] .chip[aria-pressed="true"],html[data-pal="navy"] .lt .cb-pill[aria-selected="true"]{background:#EEF2F7!important;color:#0A1020!important}
html[data-pal="navy"] .lt .cb-pill,html[data-pal="navy"] .cb-pill{background:#121B30!important;border-color:rgba(148,163,184,.16)!important}

/* ---------- LIGHT ---------- */
html[data-pal="light"]{
  color-scheme: light;
  --cyc:#F6F7F9; --cyc-hi:#FFFFFF; --card:#FFFFFF; --line:#D9DEE5; --line2:#E7EAEE;
  --ink:#0F172A; --ink2:#475467; --mute:#667085; --signal:#D92D20; --signal-hi:#B42318; --brand:#D92D20; --ir:#D92D20;
  --night:#0B1324; --night2:#0B1324; --nline:#1E2A40; --npaper:#F2F4F7; --nmute:#98A2B3;
  --stage:#fff; --studio:#fff;
  --redglow:none;
}
html[data-pal="light"] body{background:#F6F7F9;color:#0F172A}
html[data-pal="light"] .annbar{background:#0B1324;color:#C9D1DD;border-color:#0B1324}
html[data-pal="light"] .top,html[data-pal="light"] .top.dark{background:rgba(255,255,255,.9)!important;border-color:#E4E7EC!important;color:#0F172A!important}
html[data-pal="light"] .top .nav a{color:#475467!important}
html[data-pal="light"] .top .nav a:hover,html[data-pal="light"] .top .nav a[aria-current=page]{color:#0F172A!important}
html[data-pal="light"] .brand .bt{color:#0F172A}
html[data-pal="light"] .hico{color:#0F172A!important}
html[data-pal="light"] .hico:hover{background:#F2F4F7!important}
html[data-pal="light"] .cartbtn.hico .n{border-color:#fff}
/* hero stays dark navy so the particle logo glows */
html[data-pal="light"] .intro{background:#0B1324!important;color:#F2F4F7}
html[data-pal="light"] .intro::before{background:radial-gradient(55% 60% at 50% 42%,#18233B 0%,#0F192E 45%,rgba(11,19,36,0) 75%),radial-gradient(40% 24% at 50% 104%,rgba(217,45,32,.16),transparent 70%)!important}
html[data-pal="light"] .intro .btn.hollow{border-color:rgba(255,255,255,.35)!important;color:#fff!important}
html[data-pal="light"] .intro .card,html[data-pal="light"] .intro [class*="hcard"]{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important;color:#F2F4F7}
/* light sections */
html[data-pal="light"] .svcs{background:#FFFFFF!important;border-color:#E4E7EC!important}
html[data-pal="light"] .solar{background:#FFFFFF!important;border-color:#E4E7EC!important}
html[data-pal="light"] .rack,html[data-pal="light"] .work{background:#F6F7F9!important}
html[data-pal="light"] .sv,html[data-pal="light"] .card,html[data-pal="light"] .ptile,html[data-pal="light"] .calc{background:#fff!important;border:1px solid #E4E7EC!important;box-shadow:0 1px 2px rgba(16,24,40,.04)}
html[data-pal="light"] .sv:hover,html[data-pal="light"] .card:hover,html[data-pal="light"] .ptile:hover{border-color:#C5CBD3!important;box-shadow:0 14px 34px -14px rgba(16,24,40,.18)!important}
html[data-pal="light"] .cbody{background:#fff!important}
html[data-pal="light"] .sv-b p,html[data-pal="light"] .card .ln,html[data-pal="light"] .label{color:#667085!important}
html[data-pal="light"] h1,html[data-pal="light"] h2,html[data-pal="light"] h3{color:#0F172A}
html[data-pal="light"] .intro h1,html[data-pal="light"] .intro h2,html[data-pal="light"] .intro h3{color:#fff}
html[data-pal="light"] .chip{border-color:#D0D5DD!important;color:#344054!important;background:#fff!important}
html[data-pal="light"] .chip[aria-pressed="true"]{background:#0F172A!important;border-color:#0F172A!important;color:#fff!important}
html[data-pal="light"] .addb{border-color:#D0D5DD!important;color:#0F172A!important}
html[data-pal="light"] .addb:hover{background:#D92D20!important;border-color:#D92D20!important;color:#fff!important}
html[data-pal="light"] .btn.hollow{border-color:#D0D5DD;color:#0F172A}
html[data-pal="light"] .btn.hollow:hover{border-color:#0F172A;background:#F2F4F7;color:#0F172A}
html[data-pal="light"] .calc input,html[data-pal="light"] .units,html[data-pal="light"] form.q input,html[data-pal="light"] form.q select{background:#fff!important;color:#0F172A!important;border:1px solid #D0D5DD!important}
html[data-pal="light"] .readout,html[data-pal="light"] .day{background:rgba(255,255,255,.92)!important;color:#0F172A!important;border-color:#E4E7EC!important}
html[data-pal="light"] .res div{border-color:#E4E7EC!important}
/* quote: navy panel */
html[data-pal="light"] .quote{background:radial-gradient(60% 90% at 100% 0%,rgba(217,45,32,.18),transparent 60%),#0B1324!important;color:#F2F4F7}
html[data-pal="light"] .quote h2{color:#fff}
html[data-pal="light"] .quote .lead,html[data-pal="light"] .quote form.q label,html[data-pal="light"] .quote .steps li{color:#C9D1DD!important}
html[data-pal="light"] .quote form.q input,html[data-pal="light"] .quote form.q select{background:#0F1A30!important;color:#fff!important;border:1px solid #24324D!important}
/* CCTV demo box keeps its dark screen */
html[data-pal="light"] #cctv h2,html[data-pal="light"] #cctv h3{color:#0F172A}
/* footer navy */
html[data-pal="light"] footer#contact,html[data-pal="light"] .sf{background:#0B1324!important;color:#C9D1DD}
html[data-pal="light"] footer#contact a,html[data-pal="light"] .sf a{color:#C9D1DD}
html[data-pal="light"] footer#contact h4,html[data-pal="light"] .sf h4{color:#8D99AE}
html[data-pal="light"] .sf-brand,html[data-pal="light"] footer#contact .sig{color:#fff}
/* inner pages */
html[data-pal="light"] .pg,html[data-pal="light"] .lt{background:#F6F7F9!important;color:#0F172A}
html[data-pal="light"] .pg-hero,html[data-pal="light"] .sh,html[data-pal="light"] .ch{background:#FFFFFF!important;border-color:#E4E7EC!important}
html[data-pal="light"] .lt{--t1:#0F172A;--t2:#667085;--card:#fff;--hair:#E4E7EC}
html[data-pal="light"] .ls-card,html[data-pal="light"] .ls-brands a,html[data-pal="light"] .ls-why div,html[data-pal="light"] .lt .pc,html[data-pal="light"] .lt .cb-empty,html[data-pal="light"] .lt .cb-mark,html[data-pal="light"] .pc,html[data-pal="light"] .ccard,html[data-pal="light"] .sh-trust div{background:#fff!important;border:1px solid #E4E7EC!important;box-shadow:0 1px 2px rgba(16,24,40,.04)!important}
html[data-pal="light"] .ls-brands span{color:#0F172A}
html[data-pal="light"] .lt .cb-bar{background:rgba(246,247,249,.9)!important;border-color:#E4E7EC!important}
html[data-pal="light"] .lt .cb-pill{background:#fff!important;color:#0F172A!important;border:1px solid #E4E7EC!important}
html[data-pal="light"] .lt .cb-pill[aria-selected="true"]{background:#0F172A!important;color:#fff!important;border-color:#0F172A!important}
html[data-pal="light"] .lt .cb-tools select,html[data-pal="light"] .tk-form input{background:#fff!important;color:#0F172A!important;border-color:#D0D5DD!important}
html[data-pal="light"] .lt .lc-hero img{filter:drop-shadow(0 24px 30px rgba(16,24,40,.18))!important}
html[data-pal="light"] .crumb a,html[data-pal="light"] .lt .lc-crumb a,html[data-pal="light"] .lt .ls-help a{color:#D92D20!important}
html[data-pal="light"] .pd-buy .btn,html[data-pal="light"] .pd-info{color:#0F172A}

/* ---------- WHITE (graphite + red, light pages) ---------- */
html[data-pal="white"]{
  color-scheme: light;
  --cyc:#F6F7F9; --cyc-hi:#FFFFFF; --card:#FFFFFF; --line:#D9DEE5; --line2:#E7EAEE;
  --ink:#111214; --ink2:#4A4D53; --mute:#6B6F76; --signal:#D7141B; --signal-hi:#B30F15; --brand:#D7141B; --ir:#D7141B;
  --night:#0E0F11; --night2:#0E0F11; --nline:#24272C; --npaper:#F2F4F7; --nmute:#80858E;
  --stage:#fff; --studio:#fff;
  --redglow:none;
}
html[data-pal="white"] body{background:#F6F7F9;color:#111214}
html[data-pal="white"] .annbar{background:#0E0F11;color:#B6BAC1;border-color:#0E0F11}
html[data-pal="white"] .top,html[data-pal="white"] .top.dark{background:rgba(255,255,255,.9)!important;border-color:#E4E7EC!important;color:#111214!important}
html[data-pal="white"] .top .nav a{color:#4A4D53!important}
html[data-pal="white"] .top .nav a:hover,html[data-pal="white"] .top .nav a[aria-current=page]{color:#111214!important}
html[data-pal="white"] .brand .bt{color:#111214}
html[data-pal="white"] .hico{color:#111214!important}
html[data-pal="white"] .hico:hover{background:#F2F4F7!important}
html[data-pal="white"] .cartbtn.hico .n{border-color:#fff}
/* hero stays dark navy so the particle logo glows */
html[data-pal="white"] .intro{background:#0E0F11!important;color:#F2F4F7}
html[data-pal="white"] .intro::before{background:radial-gradient(55% 60% at 50% 42%,#2A2C30 0%,#1A1C1F 45%,rgba(11,19,36,0) 75%),radial-gradient(40% 24% at 50% 104%,rgba(215,20,27,.16),transparent 70%)!important}
html[data-pal="white"] .intro .btn.hollow{border-color:rgba(255,255,255,.35)!important;color:#fff!important}
html[data-pal="white"] .intro .card,html[data-pal="white"] .intro [class*="hcard"]{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important;color:#F2F4F7}
/* light sections */
html[data-pal="white"] .svcs{background:#FFFFFF!important;border-color:#E4E7EC!important}
html[data-pal="white"] .solar{background:#FFFFFF!important;border-color:#E4E7EC!important}
html[data-pal="white"] .rack,html[data-pal="white"] .work{background:#F6F7F9!important}
html[data-pal="white"] .sv,html[data-pal="white"] .card,html[data-pal="white"] .ptile,html[data-pal="white"] .calc{background:#fff!important;border:1px solid #E4E7EC!important;box-shadow:0 1px 2px rgba(16,24,40,.04)}
html[data-pal="white"] .sv:hover,html[data-pal="white"] .card:hover,html[data-pal="white"] .ptile:hover{border-color:#C5CBD3!important;box-shadow:0 14px 34px -14px rgba(16,24,40,.18)!important}
html[data-pal="white"] .cbody{background:#fff!important}
html[data-pal="white"] .sv-b p,html[data-pal="white"] .card .ln,html[data-pal="white"] .label{color:#6B6F76!important}
html[data-pal="white"] h1,html[data-pal="white"] h2,html[data-pal="white"] h3{color:#111214}
html[data-pal="white"] .intro h1,html[data-pal="white"] .intro h2,html[data-pal="white"] .intro h3{color:#fff}
html[data-pal="white"] .chip{border-color:#D0D5DD!important;color:#34373C!important;background:#fff!important}
html[data-pal="white"] .chip[aria-pressed="true"]{background:#111214!important;border-color:#111214!important;color:#fff!important}
html[data-pal="white"] .addb{border-color:#D0D5DD!important;color:#111214!important}
html[data-pal="white"] .addb:hover{background:#D7141B!important;border-color:#D7141B!important;color:#fff!important}
html[data-pal="white"] .btn.hollow{border-color:#D0D5DD;color:#111214}
html[data-pal="white"] .btn.hollow:hover{border-color:#111214;background:#F2F4F7;color:#111214}
html[data-pal="white"] .calc input,html[data-pal="white"] .units,html[data-pal="white"] form.q input,html[data-pal="white"] form.q select{background:#fff!important;color:#111214!important;border:1px solid #D0D5DD!important}
html[data-pal="white"] .readout,html[data-pal="white"] .day{background:rgba(255,255,255,.92)!important;color:#111214!important;border-color:#E4E7EC!important}
html[data-pal="white"] .res div{border-color:#E4E7EC!important}
/* quote: navy panel */
html[data-pal="white"] .quote{background:radial-gradient(60% 90% at 100% 0%,rgba(215,20,27,.18),transparent 60%),#0E0F11!important;color:#F2F4F7}
html[data-pal="white"] .quote h2{color:#fff}
html[data-pal="white"] .quote .lead,html[data-pal="white"] .quote form.q label,html[data-pal="white"] .quote .steps li{color:#B6BAC1!important}
html[data-pal="white"] .quote form.q input,html[data-pal="white"] .quote form.q select{background:#17191C!important;color:#fff!important;border:1px solid #2C2F35!important}
/* CCTV demo box keeps its dark screen */
html[data-pal="white"] #cctv h2,html[data-pal="white"] #cctv h3{color:#111214}
/* footer navy */
html[data-pal="white"] footer#contact,html[data-pal="white"] .sf{background:#0E0F11!important;color:#B6BAC1}
html[data-pal="white"] footer#contact a,html[data-pal="white"] .sf a{color:#B6BAC1}
html[data-pal="white"] footer#contact h4,html[data-pal="white"] .sf h4{color:#80858E}
html[data-pal="white"] .sf-brand,html[data-pal="white"] footer#contact .sig{color:#fff}
/* inner pages */
html[data-pal="white"] .pg,html[data-pal="white"] .lt{background:#F6F7F9!important;color:#111214}
html[data-pal="white"] .pg-hero,html[data-pal="white"] .sh,html[data-pal="white"] .ch{background:#FFFFFF!important;border-color:#E4E7EC!important}
html[data-pal="white"] .lt{--t1:#111214;--t2:#6B6F76;--card:#fff;--hair:#E4E7EC}
html[data-pal="white"] .ls-card,html[data-pal="white"] .ls-brands a,html[data-pal="white"] .ls-why div,html[data-pal="white"] .lt .pc,html[data-pal="white"] .lt .cb-empty,html[data-pal="white"] .lt .cb-mark,html[data-pal="white"] .pc,html[data-pal="white"] .ccard,html[data-pal="white"] .sh-trust div{background:#fff!important;border:1px solid #E4E7EC!important;box-shadow:0 1px 2px rgba(16,24,40,.04)!important}
html[data-pal="white"] .ls-brands span{color:#111214}
html[data-pal="white"] .lt .cb-bar{background:rgba(246,247,249,.9)!important;border-color:#E4E7EC!important}
html[data-pal="white"] .lt .cb-pill{background:#fff!important;color:#111214!important;border:1px solid #E4E7EC!important}
html[data-pal="white"] .lt .cb-pill[aria-selected="true"]{background:#111214!important;color:#fff!important;border-color:#111214!important}
html[data-pal="white"] .lt .cb-tools select,html[data-pal="white"] .tk-form input{background:#fff!important;color:#111214!important;border-color:#D0D5DD!important}
html[data-pal="white"] .lt .lc-hero img{filter:drop-shadow(0 24px 30px rgba(16,24,40,.18))!important}
html[data-pal="white"] .crumb a,html[data-pal="white"] .lt .lc-crumb a,html[data-pal="white"] .lt .ls-help a{color:#D7141B!important}
html[data-pal="white"] .pd-buy .btn,html[data-pal="white"] .pd-info{color:#111214}
html[data-pal="white"] .shop-bar{background:rgba(255,255,255,.92)!important;border-color:#E4E7EC!important}
html[data-pal="white"] .shop-tools input,html[data-pal="white"] .shop-tools select{background:#fff!important;color:#111214!important;border-color:#D0D5DD!important}
html[data-pal="white"] .shop-bar .chip{color:#4A4D53;border-color:#D0D5DD}
html[data-pal="white"] .shop-bar .chip[aria-pressed="true"]{background:#111214!important;border-color:#111214!important;color:#fff!important}
/* dark sections (3D speaker stage, cameras, quote, footer): outline buttons stay white */
html[data-pal="white"] :is(.stage,.cams,.quote,footer) .btn.hollow{border-color:rgba(255,255,255,.4)!important;color:#fff!important;background:transparent!important}
html[data-pal="white"] :is(.stage,.cams,.quote,footer) .btn.hollow:hover{border-color:#fff!important;background:rgba(255,255,255,.08)!important;color:#fff!important}
/* solar units: one clean field instead of a box inside a box */
html[data-pal="white"] .units{display:flex!important;align-items:center!important;gap:0!important;height:64px;max-width:340px;padding:0 18px 0 4px!important;border:1px solid #D0D5DD!important;border-radius:14px!important;background:#fff!important;transition:border-color .2s,box-shadow .2s}
html[data-pal="white"] .units:focus-within{border-color:#111214!important;box-shadow:0 0 0 4px rgba(17,18,20,.06)}
html[data-pal="white"] .units input[type=number]{flex:1;min-width:0;width:auto!important;height:100%!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:none;padding:0 12px!important;-moz-appearance:textfield}
html[data-pal="white"] .units input[type=number]::-webkit-inner-spin-button,html[data-pal="white"] .units input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
html[data-pal="white"] .units small{flex:none;font-size:14px;color:#6B6F76;padding-left:14px;border-left:1px solid #E4E7EC;line-height:28px}
/* the 3D speaker stage and the CCTV section stay dark: give them back the dark-theme colours */
html[data-pal="white"] :is(.stage,.cams){color-scheme:dark;
  --ink:#F2F3F5; --ink2:#B6BAC1; --mute:#80858E; --line:#2C2F35; --line2:#202328; --card:#17191C; --cyc:#0E0F11; --cyc-hi:#131417;
  color:#F2F3F5}
html[data-pal="white"] :is(.stage,.cams) :is(h1,h2,h3,h4,strong,b){color:#F2F3F5}
html[data-pal="white"] :is(.stage,.cams) :is(p,li,small){color:#B6BAC1}
html[data-pal="white"] :is(.stage,.cams) :is(.addb,button.btn:not(.solid),.chip:not([aria-pressed="true"])){color:#F2F3F5!important;border-color:#3A3D44!important;background:transparent!important}
html[data-pal="white"] :is(.stage,.cams) :is(.addb,button.btn:not(.solid)):hover{background:#D7141B!important;border-color:#D7141B!important;color:#fff!important}
/* light pages: "Add" buttons on product cards, brand-pill counts, brand labels */
html[data-pal="white"] .sc-f button{color:#111214!important;border:1px solid #D0D5DD!important;background:#fff!important}
html[data-pal="white"] .sc-f button:hover{background:#D7141B!important;border-color:#D7141B!important;color:#fff!important}
html[data-pal="white"] .cb-pill:not([aria-selected="true"]) small{background:#F2F4F7!important;color:#4A4D53!important}
html[data-pal="white"] .rack .br,html[data-pal="white"] .card .br{color:#6B6F76!important}
html[data-pal="white"] .pd-stock.in{background:#E7F6EC!important;color:#1E7A3A!important}
html[data-pal="white"] .pd-stock.out{background:#FDECEC!important;color:#B30F15!important}