/* =====================================================================================================
   Bitsy dark theme (22 October 2026). Home page first: loaded only when <body> has class "theme-dark"
   (index.php sets it; includes/header.php links this file). Remove the class and the page is back to the light "tiles" look.
   Reference: docs/REFERENCE-DARK-THEME-NOTES.md and docs/reference/dark-theme-home-reference-2026-10-22.webp
   Look: near-black page, cards barely lighter with a 1px edge, orange for every primary action, teal for links and icons,
   white headings, grey body, rounded-rectangle buttons, a control-room photo behind the hero.
   Structure, copy and behaviour are the existing page; this file only restyles it.
   Type weights and sizes live in dark-type-bold.css (the bold profile the site currently ships).
   ===================================================================================================== */
body.theme-dark{
  color-scheme:dark;
  --dk-bg:#04070b;--dk-bg2:#060c12;--dk-card:#09151b;--dk-card2:#071016;
  --dk-edge:rgba(255,255,255,.09);--dk-edge2:rgba(255,255,255,.17);--dk-glow:rgba(82,201,213,.3);
  --dk-text:#fbfdff;--dk-soft:#d5d7d8;--dk-body:#abb0b3;--dk-mute:#8c9399;
  --dk-orange:#ec5c24;--dk-teal:#04b8c8;--dk-teal-txt:#52c9d5;--dk-yellow:#f4c40c;
  --dk-grad-card:linear-gradient(180deg,#0a171d 0%,#071016 100%);
  /* the lighter "paper" and "ink" the light theme uses become the dark page */
  --paper:#04070b;--paper-2:#08131a;
  /* legacy tokens from site.css, re-mapped so older components read correctly on dark */
  --color-bg:#04070b;--color-surface:#09151b;--color-text:#d5d7d8;--color-divider:rgba(255,255,255,.1);
  --color-neutral-100:#09151b;--color-neutral-200:#0b1620;--color-neutral-300:#1b252c;--color-neutral-400:#2c3943;
  --color-neutral-500:#8c9399;--color-neutral-600:#9aa3ab;--color-neutral-700:#abb0b3;--color-neutral-800:#d5d7d8;--color-neutral-900:#fbfdff;
  --color-accent-100:rgba(236,92,36,.14);--color-accent-700:#52c9d5;
  --color-accent-2-500:#0d6671;--color-accent-2-600:#0d2a33;--color-accent-2-700:#0a1a22;--color-accent-2-800:#071218;--color-accent-2-900:#04090d;
  background:var(--dk-bg);color:var(--dk-body);
  scrollbar-color:#2c3943 #04070b;
}
html:has(body.theme-dark){background:#04070b}
body.theme-dark.home-v3{background:var(--dk-bg);color:var(--dk-body)}
body.theme-dark ::selection{background:var(--dk-teal);color:#04070b}
body.theme-dark ::-webkit-scrollbar{width:12px;height:12px}
body.theme-dark ::-webkit-scrollbar-track{background:#04070b}
body.theme-dark ::-webkit-scrollbar-thumb{background:#1d2830;border-radius:8px;border:3px solid #04070b}
body.theme-dark ::-webkit-scrollbar-thumb:hover{background:#2c3943}
body.theme-dark :focus-visible{outline:2px solid var(--dk-teal-txt);outline-offset:3px}
body.theme-dark .bt:focus-visible,body.theme-dark .faqs summary:focus-visible,body.theme-dark .media-toggle:focus-visible,body.theme-dark .bs-pause:focus-visible{outline:2px solid var(--dk-teal-txt);outline-offset:3px}

/* ---------------------------------------- headings, shared ---------------------------------------- */
body.theme-dark.home-v3 .h2,body.theme-dark #main section.sec h2.h2,body.theme-dark #main section.longread .lr-article h2,body.theme-dark .reel-head .h2,body.theme-dark .story-top .h2,body.theme-dark .proc .h2{color:var(--dk-text)}
body.theme-dark.home-v3 .lede,body.theme-dark #main section.sec .lede,body.theme-dark #main .sechead .lede{color:var(--dk-body)}
body.theme-dark #main section.sec .prose p,body.theme-dark #main .lr-article .prose p,body.theme-dark .contentsec .prose p{color:var(--dk-body)}
body.theme-dark #main section.sec .prose h3,body.theme-dark .lr-article .prose h3{color:var(--dk-text)}
body.theme-dark #main section.sec h2.h2::before{background:var(--dk-teal);height:4px;width:44px;border-radius:2px;transform:none}

/* ---------------------------------------- buttons: rounded rectangles, orange primary ---------------------------------------- */
body.theme-dark .btn,body.theme-dark .btn-lg,body.theme-dark .btn-primary,body.theme-dark .btn-line,body.theme-dark #main .sec .btn-secondary{border-radius:12px}
body.theme-dark{--cta-from:#bf3811;--cta-mid:#cb4017;--cta-to:#d4451a}  /* every stop keeps white text at 4.5:1 or better */
body.theme-dark .btn-primary{background:linear-gradient(135deg,var(--cta-from) 0%,var(--cta-mid) 55%,var(--cta-to) 100%);box-shadow:0 12px 28px -12px rgba(236,92,36,.6),inset 0 1px 0 rgba(255,255,255,.22);border:0}
body.theme-dark .btn-primary:hover{background:linear-gradient(135deg,#b13210 0%,#c13a14 55%,#cc4017 100%);box-shadow:0 18px 38px -12px rgba(236,92,36,.85),0 0 0 3px rgba(236,92,36,.22),inset 0 1px 0 rgba(255,255,255,.28)}
body.theme-dark .btn-line,body.theme-dark .btn-line.on-dark{color:#fff;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.32)}
body.theme-dark .btn-line:hover,body.theme-dark .on-dark .btn-line:hover,body.theme-dark .btn-line.on-dark:hover{background:rgba(255,255,255,.1);color:#fff;border-color:var(--dk-teal-txt)}
/* secondary buttons on dark: the white pill with a hard orange shadow becomes an outlined button with a teal arrow disc */
body.theme-dark #main .sec .btn-secondary{background:rgba(255,255,255,.04);color:#fff!important;border:1.5px solid rgba(255,255,255,.28);box-shadow:none}
body.theme-dark #main .sec .btn-secondary:hover{background:rgba(255,255,255,.1);color:#fff!important;border-color:var(--dk-teal-txt);box-shadow:none;transform:translateY(-2px)}
body.theme-dark #main .sec .btn-secondary::after{background-color:var(--dk-teal);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304070b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
body.theme-dark #main .sec .btn-secondary:hover::after{background-color:var(--dk-teal-txt)}

/* ---------------------------------------- forms (hero, booklet, final band, anywhere) ---------------------------------------- */
body.theme-dark .input,body.theme-dark select.input,body.theme-dark .cselect-btn,body.theme-dark textarea.input{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:12px;color:#fff;box-shadow:none}
body.theme-dark .input:hover,body.theme-dark .cselect-btn:hover{border-color:rgba(255,255,255,.3)}
body.theme-dark .input:focus,body.theme-dark .input:focus-visible,body.theme-dark .cselect.open .cselect-btn{background:rgba(255,255,255,.08);border-color:var(--dk-teal-txt);box-shadow:0 0 0 3px rgba(4,184,200,.22);outline:0}
body.theme-dark .input::placeholder{color:#8f99a1;opacity:1}
body.theme-dark .cselect-btn .cselect-txt{color:#fff}
body.theme-dark .cselect-btn.is-placeholder .cselect-txt{color:#8f99a1;opacity:1}
body.theme-dark .cselect-list{background:#0a171d;border:1px solid var(--dk-edge2);box-shadow:0 24px 50px -16px rgba(0,0,0,.85)}
body.theme-dark .cselect-opt{color:var(--dk-soft)}
body.theme-dark .cselect-opt:hover,body.theme-dark .cselect-opt[aria-selected=true],body.theme-dark .cselect-opt.is-selected{background:rgba(4,184,200,.14);color:#fff}
body.theme-dark .field label,body.theme-dark label{color:var(--dk-soft)}
body.theme-dark .privacy{color:var(--dk-mute)}
body.theme-dark .errbox{background:rgba(236,92,36,.12);border:1px solid rgba(236,92,36,.45);color:#ffd9c8}
body.theme-dark .formcard .phonefield{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:12px}
body.theme-dark .formcard .phonefield:hover{border-color:rgba(255,255,255,.3)}
body.theme-dark .formcard .phonefield:focus-within{background:rgba(255,255,255,.08);border-color:var(--dk-teal-txt);box-shadow:0 0 0 3px rgba(4,184,200,.22)}
body.theme-dark .formcard .phonefield .cc,body.theme-dark .phonefield .cc{color:#fff;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) right center/1px 56% no-repeat}
body.theme-dark .formcard .phonefield .input{background:transparent!important;color:#fff}
body.theme-dark .formcard .phonefield .input:hover,body.theme-dark .formcard .phonefield .input:focus{background:transparent!important}

/* ---------------------------------------- header ---------------------------------------- */
body.theme-dark .hdr,body.theme-dark .hdr.scrolled{background:rgba(4,7,11,.8);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--dk-edge);box-shadow:none}
body.theme-dark .hdr.scrolled{background:rgba(4,7,11,.92);box-shadow:0 14px 40px -22px rgba(0,0,0,.9)}
body.theme-dark .mainnav > a,body.theme-dark .hasmega > a,body.theme-dark .mainnav a{color:var(--dk-soft)}
body.theme-dark .mainnav a:hover,body.theme-dark .mainnav a[aria-current=page],body.theme-dark .hasmega:hover > a{color:#fff}
body.theme-dark .navtoggle{color:#fff}
body.theme-dark .tel{color:#fff;padding:5px 16px 5px 5px;border:1px solid rgba(82,201,213,.38);border-radius:999px;background:rgba(4,184,200,.06)}
body.theme-dark .tel:hover{color:#fff;border-color:var(--dk-teal-txt);background:rgba(4,184,200,.12)}
body.theme-dark .tel i{background:rgba(4,184,200,.16);color:var(--dk-teal-txt)}
body.theme-dark .mega{background:#09151b;border:1px solid var(--dk-edge2);box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
body.theme-dark .megatop{background:#0a1a22;border-bottom:1px solid var(--dk-edge)}
body.theme-dark .megatop a:hover{color:var(--dk-teal-txt)}
body.theme-dark .megacol a:hover{background:rgba(255,255,255,.05)}
body.theme-dark .megacol a:hover b{color:var(--dk-teal-txt)}
body.theme-dark .megafeat{border-left-color:var(--dk-edge)}
@media (max-width:980px){body.theme-dark .mainnav{background:#06101a}}

/* ---------------------------------------- 1. hero: control-room photo, dark overlay, glass form ---------------------------------------- */
body.theme-dark .hx{background:
  linear-gradient(90deg,rgba(4,7,11,.95) 0%,rgba(4,7,11,.76) 38%,rgba(4,7,11,.3) 100%),
  linear-gradient(0deg,#04070b 0%,rgba(4,7,11,0) 20%),
  linear-gradient(180deg,rgba(4,7,11,.5) 0%,rgba(4,7,11,0) 18%),
  url('../img/uploads/integrated-command-and-control-center.webp') center 30%/cover no-repeat,#04070b}
body.theme-dark .hx-bg{background:radial-gradient(720px 420px at 8% 108%,rgba(236,92,36,.17),transparent 65%),radial-gradient(820px 520px at 100% -4%,rgba(4,184,200,.16),transparent 60%)}
body.theme-dark .hx-bg .tl{display:none}
body.theme-dark .hx-pill{background:rgba(255,255,255,.06);color:var(--dk-soft);box-shadow:none;border:1px solid var(--dk-edge2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.theme-dark .hx-title{color:var(--dk-text)}
body.theme-dark .mk::before{display:none}
body.theme-dark .hx-title .mk{color:var(--dk-orange)}
body.theme-dark .hx-lede{color:var(--dk-soft)}
body.theme-dark .hx-stats{border-top:1px solid var(--dk-edge)}
body.theme-dark .hx-stats b{color:#fff}
body.theme-dark .hx-stats span{color:var(--dk-mute)}
body.theme-dark .hx-stats li::before{background:var(--dk-orange)}
body.theme-dark .hx-stats li:nth-child(even)::before{background:var(--dk-teal)}
body.theme-dark .hx .formwrap::before,body.theme-dark .hx .formwrap::after{display:none}
body.theme-dark .hx .formcard{background:linear-gradient(180deg,rgba(11,25,32,.9),rgba(6,13,18,.92));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(82,201,213,.3);border-radius:20px;box-shadow:0 0 0 1px rgba(4,184,200,.05),0 40px 90px -30px rgba(0,0,0,.9),0 0 70px -24px rgba(4,184,200,.3)}
body.theme-dark .hx .formcard-hd h2{color:#fff}
body.theme-dark .hx .field label{color:var(--dk-soft)}
body.theme-dark .hx .input,body.theme-dark .hx .cselect-btn{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);color:#fff}
body.theme-dark .hx .input:focus,body.theme-dark .hx .input:focus-visible,body.theme-dark .hx .cselect.open .cselect-btn{background:rgba(255,255,255,.08);border-color:var(--dk-teal-txt)}
body.theme-dark .hx .input::placeholder,body.theme-dark .hx .cselect-btn.is-placeholder .cselect-txt{color:#8f99a1}
body.theme-dark .hx .cselect-btn .cselect-txt{color:#fff}
body.theme-dark .hx .phonefield .cc{color:#fff}
body.theme-dark .hx .privacy{color:var(--dk-mute)}

/* ---------------------------------------- 2. clients and alliances scrollers ---------------------------------------- */
body.theme-dark.home-v3 .credstrip{background:var(--dk-bg);border-block:1px solid var(--dk-edge)}
body.theme-dark .brandscroll-label{color:var(--dk-mute)}
body.theme-dark .clientscroll .brandtrack li.tile,body.theme-dark .partnerscroll .brandtrack li.tile{background:#eef2f6;border:1px solid rgba(255,255,255,.12);box-shadow:none}
body.theme-dark .brandtrack li.txt span{color:#1d2735}
body.theme-dark .clientscroll .brandtrack li.sep{background:linear-gradient(180deg,transparent,rgba(82,201,213,.6),transparent)}
body.theme-dark .clientscroll .brandtrack li.grp span{background:rgba(236,92,36,.14);color:#ffb08f;border:1px solid rgba(236,92,36,.45);box-shadow:none}
body.theme-dark .brandmask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
body.theme-dark .media-toggle,body.theme-dark .bs-pause{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:none}
body.theme-dark .media-toggle:hover,body.theme-dark .bs-pause:hover{background:var(--dk-orange);color:#fff}

/* ---------------------------------------- 3. showreel ---------------------------------------- */
body.theme-dark .reel{background:var(--dk-bg)}
body.theme-dark .reel-screen{background:#06101a;border:1px solid var(--dk-edge);box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 0 90px -30px rgba(4,184,200,.28)}
body.theme-dark .reel-screen::after{background:linear-gradient(180deg,rgba(4,7,11,0) 50%,rgba(4,7,11,.85))}
body.theme-dark .reel-chips span{background:rgba(4,7,11,.62);color:var(--dk-soft);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------------------------------------- 4. story (pinned stage) ---------------------------------------- */
body.theme-dark .story,body.theme-dark .story.static-scene,.js body.theme-dark .story{background:linear-gradient(180deg,#050b11 0%,#04070b 100%);border-radius:0!important;border-top:1px solid var(--dk-edge)}
body.theme-dark .story-pin::before{background:radial-gradient(900px 520px at 85% 20%,rgba(4,184,200,.16),transparent 60%),radial-gradient(700px 480px at 5% 90%,rgba(236,92,36,.13),transparent 60%)}
body.theme-dark .story-fig::before{display:none}
body.theme-dark .story-fig img{border-radius:20px;border:1px solid var(--dk-edge);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
body.theme-dark .story-copy .apps{color:var(--dk-body)}
body.theme-dark .story-copy li{color:var(--dk-soft)}
body.theme-dark .story-dots i{background:rgba(255,255,255,.16)}

/* ---------------------------------------- 5. case studies (bento) ---------------------------------------- */
body.theme-dark .sol{background:var(--dk-bg)}
body.theme-dark .bt{border-radius:20px;border:1px solid var(--dk-edge);background:#06101a}
body.theme-dark .bt:hover{border-radius:20px;transform:translateY(-5px);border-color:rgba(82,201,213,.5);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
body.theme-dark .bt::before{background:linear-gradient(180deg,rgba(4,7,11,.04) 20%,rgba(4,7,11,.9) 100%)}
body.theme-dark .bt-g{background:rgba(4,7,11,.66);color:var(--dk-soft);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.theme-dark .bt-g::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--c);vertical-align:1px}
body.theme-dark .bt[data-g=kiosks] .bt-g{color:var(--dk-soft)}
body.theme-dark .bt-go{background:var(--dk-teal);color:#04070b}

/* ---------------------------------------- alliances band ---------------------------------------- */
body.theme-dark.home-v3 .alliancesec{background:var(--dk-bg)}

/* ---------------------------------------- 6. process ---------------------------------------- */
body.theme-dark .proc{background:var(--dk-bg2);color:var(--dk-body);border-radius:0;border-top:1px solid var(--dk-edge)}
body.theme-dark #main section.proc .lede,body.theme-dark .proc .lede{color:var(--dk-body)!important}
body.theme-dark .proc-line{background:rgba(255,255,255,.1)}
body.theme-dark .proc-line::after{background:linear-gradient(90deg,var(--dk-teal),var(--dk-orange))}
body.theme-dark .proc-grid{counter-reset:ps}
body.theme-dark .proc-step{counter-increment:ps;background:var(--dk-grad-card);border:1px solid var(--dk-edge);border-radius:20px;box-shadow:none}
body.theme-dark .proc-step::before{content:counter(ps);position:absolute;top:30px;right:26px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--dk-teal);color:#04070b;font:800 15px/1 var(--font-heading)}
body.theme-dark .proc-step:nth-child(2)::before{background:var(--dk-orange);color:#fff}
body.theme-dark .proc-step:nth-child(3)::before{background:var(--dk-yellow)}
body.theme-dark .proc-ic,body.theme-dark .proc-step:nth-child(n) .proc-ic{width:58px;height:58px;border-radius:15px;background:rgba(4,184,200,.09);border:1px solid rgba(4,184,200,.34);color:var(--dk-teal-txt);transform:none}
body.theme-dark .proc-step:nth-child(2) .proc-ic{background:rgba(236,92,36,.1);border-color:rgba(236,92,36,.4);color:#ff8a57}
body.theme-dark .proc-step:nth-child(3) .proc-ic{background:rgba(244,196,12,.09);border-color:rgba(244,196,12,.38);color:var(--dk-yellow)}
body.theme-dark .proc-step h3{color:#fff}
body.theme-dark .proc-step p{color:var(--dk-body)}

/* ---------------------------------------- 7. why us ---------------------------------------- */
body.theme-dark .why{background:var(--dk-bg)}
body.theme-dark .why-card{background:var(--dk-grad-card);border:1px solid var(--dk-edge);border-radius:20px}
body.theme-dark .why-card::before{width:200px;height:200px;right:-70px;top:-70px;border-radius:50%;background:var(--k);opacity:.2;filter:blur(46px);transform:none}
body.theme-dark .why-card:hover::before{transform:none;opacity:.3}
body.theme-dark .why-card b{color:#fff}
body.theme-dark .why-card h3{color:#fff}
body.theme-dark .why-card p{color:var(--dk-body)}
body.theme-dark .certs-row{border-top:1px solid var(--dk-edge)}
body.theme-dark .certs-row p{color:var(--dk-soft)}
body.theme-dark .certs-row img,body.theme-dark .aboutsec .credlogos img{background:#eef2f6;border:1px solid rgba(255,255,255,.14)}

/* ---------------------------------------- 8. industries ---------------------------------------- */
body.theme-dark.home-v3 .indsec{background:var(--dk-bg2);border-top:1px solid var(--dk-edge)}
body.theme-dark.home-v3 .indtabs-list [role=tab]{color:var(--dk-soft);background:rgba(255,255,255,.03);border:1px solid var(--dk-edge);border-radius:14px}
body.theme-dark.home-v3 .indtabs-list [role=tab]:hover{background:rgba(255,255,255,.06);border-color:var(--dk-edge2)}
body.theme-dark.home-v3 .indtabs-list [role=tab][aria-selected=true]{background:rgba(4,184,200,.11);border-color:rgba(82,201,213,.55);color:#fff}
body.theme-dark.home-v3 .indpanel::before{display:none}
body.theme-dark.home-v3 .indpanel img{border-radius:20px;border:1px solid var(--dk-edge);box-shadow:0 40px 80px -34px rgba(0,0,0,.95)}
body.theme-dark.home-v3 .indpanel-copy{background:var(--dk-grad-card);border:1px solid var(--dk-edge2);border-radius:20px;box-shadow:0 40px 80px -40px rgba(0,0,0,.95)}
body.theme-dark.home-v3 .indpanel-copy h3{color:#fff}
body.theme-dark.home-v3 .indpanel-copy > p{color:var(--dk-body)}
body.theme-dark.home-v3 .indpanel-copy .indlinks-title{color:var(--dk-teal-txt)}
body.theme-dark.home-v3 .indlinks a{background:rgba(255,255,255,.04);border:1px solid var(--dk-edge2);color:#fff;border-radius:12px}
body.theme-dark.home-v3 .indlinks a:hover{background:rgba(4,184,200,.14);border-color:var(--dk-teal-txt);color:#fff}
body.theme-dark.home-v3 .indlinks li:last-child a{border-bottom:1px solid var(--dk-edge2)}

/* ---------------------------------------- 9. testimonials ---------------------------------------- */
body.theme-dark.home-v3 .quotesec,body.theme-dark #main section.sec:has(> .wrap > .quotes){background:var(--dk-bg)!important;border-radius:0;border-top:1px solid var(--dk-edge)}
body.theme-dark.home-v3 .quotesec::before{background:radial-gradient(800px 480px at 90% 0%,rgba(4,184,200,.12),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(236,92,36,.09),transparent 60%)}
body.theme-dark.home-v3 .quotesec blockquote,body.theme-dark .quotes blockquote{background:var(--dk-grad-card);border:1px solid var(--dk-edge);border-radius:20px;-webkit-backdrop-filter:none;backdrop-filter:none}
body.theme-dark .quotes blockquote:hover{transform:translateY(-4px);background:var(--dk-grad-card);border-color:rgba(82,201,213,.4)}
body.theme-dark .quotes blockquote::before,body.theme-dark.home-v3 .quotesec blockquote::before{color:var(--dk-teal-txt);opacity:.9}
body.theme-dark .quotes blockquote p,body.theme-dark.home-v3 .quotesec blockquote p{color:var(--dk-soft)}
body.theme-dark .quotes blockquote footer{border-top:1px solid var(--dk-edge)}
body.theme-dark .quotes blockquote footer span,body.theme-dark.home-v3 .quotesec blockquote footer span{color:var(--dk-mute)}
body.theme-dark .quotes .mono{border-radius:50%;transform:none}

/* ---------------------------------------- 10. the "paper" zone (about, guide, FAQ, booklet): now the same dark page ---------------------------------------- */
body.theme-dark .paper{background:var(--dk-bg);border-radius:0;margin-top:0;padding:0}
body.theme-dark .paper .sec,body.theme-dark .paper > section.sec{background:transparent}
body.theme-dark #main .contentsec.alt{background:none}
body.theme-dark .aboutsec .card{background:var(--dk-grad-card);border:1px solid var(--dk-edge);box-shadow:none;border-radius:20px}
body.theme-dark .aboutsec .card .mini{color:var(--dk-teal-txt)}
body.theme-dark .aboutsec .card .dots li{color:var(--dk-soft)}
body.theme-dark .aboutsec .washed,body.theme-dark #main .sec .split > .washed,body.theme-dark #main .sec .split:nth-of-type(even) > .washed,body.theme-dark .contentsec .washed{box-shadow:0 36px 70px -34px rgba(0,0,0,.95)!important;border:1px solid var(--dk-edge);border-radius:20px!important}
body.theme-dark .aboutsec .factgrid > div{background:rgba(255,255,255,.04);border:1px solid var(--dk-edge)}
body.theme-dark .aboutsec .factgrid b{color:#fff}
body.theme-dark .aboutsec .factgrid span{color:var(--dk-mute)}
body.theme-dark .aboutsec .credrow{border-top:1px solid var(--dk-edge)}
body.theme-dark .aboutsec .credrow .mini{color:var(--dk-soft)}
body.theme-dark .longread{background:var(--dk-bg2);border-top:1px solid var(--dk-edge);border-bottom:1px solid var(--dk-edge)}
body.theme-dark .longread-toc p{color:var(--dk-mute)}
body.theme-dark .longread-toc a[aria-current=true]{color:var(--dk-teal-txt);background:rgba(4,184,200,.1)}
body.theme-dark .lr-article h2{color:var(--dk-text)}
body.theme-dark .deftable th{color:var(--dk-text)}
/* FAQ */
body.theme-dark #main section.sec:has(.faqs) .split.narrow-left > div:first-child{background:var(--dk-grad-card);border:1px solid var(--dk-edge2);box-shadow:none;border-radius:20px}
body.theme-dark #main section.sec:has(.faqs) .split.narrow-left > div:first-child::after{display:none}
body.theme-dark #main section.sec:has(.faqs) .split.narrow-left > div:first-child h2.h2{color:#fff}
body.theme-dark #main section.sec:has(.faqs) .split.narrow-left > div:first-child .lede{color:var(--dk-body)}
body.theme-dark .faqs details{background:var(--dk-grad-card);border:1px solid var(--dk-edge);border-radius:16px;box-shadow:none}
body.theme-dark .faqs details[open]{border-color:rgba(82,201,213,.55);box-shadow:0 30px 56px -36px rgba(0,0,0,.9)}
body.theme-dark .faqs summary{color:#fff}
body.theme-dark .faqs summary::after,body.theme-dark .faqs details:nth-child(n) summary::after{background:rgba(4,184,200,.12);border:1px solid rgba(4,184,200,.38);color:var(--dk-teal-txt);border-radius:10px;transform:none}
body.theme-dark .faqs details[open] summary::after{transform:rotate(45deg)}
body.theme-dark .faqs details p{color:var(--dk-body)}
/* booklet card and questionnaire strip */
body.theme-dark .magnet{background:linear-gradient(135deg,#0a1a22 0%,#071218 100%);border:1px solid var(--dk-edge2);border-radius:20px;box-shadow:0 50px 90px -50px rgba(0,0,0,.95)}
body.theme-dark .magnet::before{display:none}
body.theme-dark .magnet h2 em{color:var(--dk-orange)}
body.theme-dark .magnet-lede{color:var(--dk-body)}
body.theme-dark .magnet-note{color:var(--dk-mute)}
body.theme-dark #main .ctaband{background:linear-gradient(135deg,#0a1a22,#071218);border:1px solid var(--dk-edge2);border-radius:20px}
body.theme-dark #main .ctaband::after{display:none}

/* ---------------------------------------- 11. final enquiry band: deep teal with glow curves ---------------------------------------- */
body.theme-dark.home-v3 .talksec{background:linear-gradient(135deg,#042c34 0%,#05343c 55%,#063e47 100%);border-radius:0;margin-top:0;border-top:1px solid rgba(82,201,213,.25)}
body.theme-dark.home-v3 .talksec::before{right:-12%;top:-45%;width:62vw;height:42vw;border-radius:50%;background:radial-gradient(closest-side,rgba(82,201,213,.32),transparent 72%);transform:none;opacity:1}
body.theme-dark.home-v3 .talksec::after{left:-14%;bottom:-62%;width:54vw;height:30vw;border-radius:50%;background:radial-gradient(closest-side,rgba(236,92,36,.26),transparent 72%);transform:none}
body.theme-dark .talkform{background:linear-gradient(180deg,rgba(9,21,27,.9),rgba(5,12,17,.94))!important;border:1px solid rgba(82,201,213,.3);border-radius:20px;box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
body.theme-dark .talkform label{color:var(--dk-soft)}
body.theme-dark .talkform .opt{color:var(--dk-mute)}
body.theme-dark .home-v3 .talkcopy .h2,body.theme-dark #main section.talksec h2.h2{color:#fff!important}
body.theme-dark .talkpts li::before{background-color:var(--dk-teal)}

/* ---------------------------------------- footer ---------------------------------------- */
body.theme-dark .ftr{--color-neutral-300:#c9d0d6;--color-neutral-500:#8c9399;--color-neutral-800:#1b252c;--color-neutral-900:#04040c;background:#04040c;border-top:1px solid var(--dk-edge);color:var(--dk-body)}
body.theme-dark .ftr a:hover{color:var(--dk-teal-txt)}
body.theme-dark .ftr .accent a{color:var(--dk-teal-txt)}

/* ---------------------------------------- floating widgets ---------------------------------------- */
body.theme-dark .botbubble{background:#fff;color:#0c1015;box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.12);animation:bubbleBob 2.4s ease-in-out infinite}
body.theme-dark .botbubble::after{background:#fff;box-shadow:none}
body.theme-dark .fabbtn-bot{background:linear-gradient(135deg,#d4451a 0%,#ec5c24 100%);box-shadow:0 12px 28px rgba(236,92,36,.5)}
body.theme-dark .fabbtn-bot::before{border-color:rgba(236,92,36,.6)}
body.theme-dark .fabbtn-bot .fabdot{background:#fff;border-color:var(--dk-orange)}
/* the chat card stays white, like the reference; header and avatar go orange and ink */
body.theme-dark .botpanel,body.theme-dark .fabpanel{--color-neutral-100:#fff;--color-neutral-300:#e3e9f2;--color-neutral-600:#5a6678;--color-neutral-700:#44506a;--color-neutral-800:#2c3748;--color-neutral-900:#0c1730;background:#fff;color:#2c3748;border-color:rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.7)}
body.theme-dark .bothd,body.theme-dark .fabpanel-hd{background:linear-gradient(180deg,#0b1820,#071016);color:#fff}
body.theme-dark .botavatar{background:linear-gradient(135deg,#d4451a,#ec5c24)}
body.theme-dark .botmsg a{color:#b53a12}
body.theme-dark .botmsg.me{background:linear-gradient(135deg,#d4451a,#e4521d);color:#fff}
body.theme-dark .ctsfloat-btn{border-color:rgba(255,255,255,.85)}
body.theme-dark .ctsfloat-x{background:#0c1015;color:#fff;border:1px solid rgba(255,255,255,.35)}
body.theme-dark .ctsfloat-x:hover{background:var(--dk-orange)}
body.theme-dark .mobbar{background:rgba(4,7,11,.94);border-top:1px solid var(--dk-edge)}
body.theme-dark .mobbar .btn-secondary,body.theme-dark .mobbar .btn-line{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--dk-edge2)}

/* ---------------------------------------- fixes from the first full walk-through ---------------------------------------- */
/* FAQ help card: a legacy rule made this button white; on dark it is an outlined button like the others */
body.theme-dark #main section.sec:has(.faqs) .split.narrow-left > div:first-child .btn-secondary{background:rgba(255,255,255,.05);color:#fff!important;border:1.5px solid rgba(255,255,255,.3);border-radius:12px}
body.theme-dark #main section.sec:has(.faqs) .split.narrow-left > div:first-child .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--dk-teal-txt)}
/* story progress dots and the industry tab dots stay inside the orange and teal palette */
body.theme-dark .story-dots i:nth-child(n).on{background:var(--dk-orange)}
body.theme-dark .story-dots i.cur{background:var(--dk-orange)}
body.theme-dark.home-v3 .indtabs-list [role=tab]:nth-child(5n){--tcol:#a8b3bf}
/* footer credit logo is dark artwork: lift it for the dark footer */
body.theme-dark .ftr .credit img{filter:brightness(0) invert(1);opacity:.78}
/* the chat card is white, so its input stays light */
body.theme-dark .botpanel .input,body.theme-dark .botpanel input,body.theme-dark .fabpanel .input{background:#f4f7fb;border:1px solid #d7dfeb;color:#0c1730;border-radius:12px}
body.theme-dark .botpanel .input::placeholder,body.theme-dark .botpanel input::placeholder{color:#677386}
body.theme-dark .botpanel .input:focus,body.theme-dark .botpanel input:focus{background:#fff;border-color:#d4451a;box-shadow:0 0 0 3px rgba(212,69,26,.18)}
/* chat quick-reply chips (28 Oct 2026): they sit on the white card, so ink text and an orange outline, filled orange on hover; two equal columns.
   Before, the dark-theme teal text was unreadable on white and the font shorthand in site.css was dropped by the browser (thin 13px text). */
body.theme-dark .botchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.theme-dark .botchip{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 12px;border:1.5px solid rgba(212,69,26,.55);border-radius:999px;background:#fff;color:#0c1730;font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.25;text-align:center;text-decoration:none;box-shadow:0 1px 2px rgba(12,23,48,.06);transition:background-color .15s,color .15s,border-color .15s,transform .15s}
body.theme-dark .botchip:hover{background:linear-gradient(135deg,#d4451a,#ec5c24);border-color:#d4451a;color:#fff;text-decoration:none;transform:translateY(-1px)}
body.theme-dark .botchip:active{transform:translateY(0)}
body.theme-dark .botchip:focus-visible{outline:2px solid #d4451a;outline-offset:2px}
/* single-column hero (up to 1100px): the copy spans the full width, so the photo is dimmed top to bottom instead of left to right */
@media (max-width:1100px){
  body.theme-dark .hx{background:
    linear-gradient(180deg,rgba(4,7,11,.9) 0%,rgba(4,7,11,.82) 45%,rgba(4,7,11,.95) 100%),
    url('../img/uploads/integrated-command-and-control-center.webp') center 20%/cover no-repeat,#04070b}
}

/* =====================================================================================================
   HERO (22 Oct 2026): follows the design screenshot in the client document and the 20/10 list.
   Video behind the hero (the existing showreel files), headline, supporting line, CTS strip with the video popup,
   five highlights, and the transparent "Enquire Now" form.
   ===================================================================================================== */
body.theme-dark .hx{background:#04070b}
body.theme-dark .hx-bg{display:none}
body.theme-dark .hx-video{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;background:#04070b}
body.theme-dark .hx-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the showreel carries a logo (top left) and a caption (bottom left) inside the picture; the left side is dimmed hardest so they stay out of sight */
body.theme-dark .hx-video::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,7,11,.94) 0%,rgba(4,7,11,.84) 36%,rgba(4,7,11,.56) 68%,rgba(4,7,11,.46) 100%),
    linear-gradient(180deg,rgba(4,7,11,.6) 0%,rgba(4,7,11,0) 20%,rgba(4,7,11,0) 66%,#04070b 100%)}
body.theme-dark .hx-toggle{display:grid;left:calc(max(0px,(100% - var(--page-max)) / 2) + var(--page-pad));right:auto;top:auto;bottom:22px;width:40px;height:40px;z-index:4}
body.theme-dark .hx.hx-novideo .hx-toggle{display:none}
@media (prefers-reduced-motion:reduce){body.theme-dark .hx-toggle{display:none}}

body.theme-dark .hx-grid{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(28px,4vw,72px);align-items:center}
body.theme-dark .hx{padding-block:clamp(36px,6vh,72px) clamp(64px,9vh,104px)}

/* headline and supporting line */
body.theme-dark .hx-title,body.theme-dark.type-bold .hx-title{font-size:min(clamp(44px,5.9vw,86px),12.9cqi);margin:0 0 20px;text-shadow:0 2px 24px rgba(0,0,0,.5)}
body.theme-dark .hx-lede{color:#fff;font-weight:600;font-size:clamp(18px,1.7vw,24px);line-height:1.32;max-width:21em;margin:0 0 28px;text-shadow:0 1px 14px rgba(0,0,0,.6)}

/* CTS strip: round badge, "CTS Certified |", and the "Why CTS Matters" video button */
body.theme-dark .hx-cts{--cts:76px;display:flex;align-items:center;width:fit-content;max-width:100%;margin:0 0 34px;position:relative}
body.theme-dark .hx-cts-logo{position:relative;z-index:2;flex:none;width:var(--cts);height:var(--cts);border-radius:50%;box-shadow:0 8px 22px rgba(0,0,0,.55);background:#fff}
body.theme-dark .hx-cts-t{margin:0 0 0 calc(var(--cts) * -.45);display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:calc(var(--cts) * .74);padding:14px 26px 14px calc(var(--cts) * .45 + 16px);border-radius:14px;background:linear-gradient(90deg,rgba(5,58,68,.78),rgba(5,58,68,.6));border:1px solid rgba(82,201,213,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:clamp(16px,1.45vw,20px);color:#fff}
@media (min-width:1500px){body.theme-dark .hx-cts{--cts:92px}}
@media (max-width:600px){body.theme-dark .hx-cts{--cts:68px}}
/* the line under the headline stays on one line from tablet width up (it wrapped at 21em); on phones it wraps as before */
@media (min-width:700px){body.theme-dark .hx-lede{max-width:none;white-space:nowrap}}
body.theme-dark .hx-cts-t b{font-weight:600;color:#fff}
body.theme-dark .hx-cts-t i{font-style:normal;color:#fff;opacity:.9}
body.theme-dark .hx-cts-link{display:inline-flex;align-items:center;gap:9px;padding:0;margin:0;border:0;background:none;color:#52c9d5;font:inherit;font-weight:600;cursor:pointer}
body.theme-dark .hx-cts-link:hover{color:#8fe3ec}
body.theme-dark .hx-cts-link svg{flex:none}

/* five highlights with line icons and thin dividers */
body.theme-dark .hx-stats{display:flex;flex-wrap:wrap;gap:20px 0;margin:0;padding:0;border:0;list-style:none}
body.theme-dark .hx-stats li{display:flex;align-items:center;gap:12px;padding:0 clamp(12px,1.7vw,26px)}
body.theme-dark .hx-stats li:first-child{padding-left:0}
body.theme-dark .hx-stats li+li{border-left:1px solid rgba(255,255,255,.18)}
body.theme-dark .hx-stats li::before{display:none}
body.theme-dark .hx-stats .si{flex:none}
body.theme-dark .hx-stats .si-t{color:#2fd0dd}
body.theme-dark .hx-stats .si-o{color:#ff7a3c}
body.theme-dark .hx-stats .st{display:block;margin:0;font-size:inherit}
body.theme-dark .hx-stats .st b{display:block;font-size:clamp(20px,1.9vw,28px);line-height:1.05;font-weight:700;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
body.theme-dark .hx-stats .st span{display:block;margin:4px 0 0;font-size:13.5px;font-weight:500;color:#c4cbd1;line-height:1.2}

/* the transparent form */
body.theme-dark .hx .formwrap{width:100%;justify-self:end}
body.theme-dark .hx .formcard.hx-enq{background:rgba(6,14,20,.5);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border:1px solid rgba(82,201,213,.42);border-radius:20px;box-shadow:0 30px 80px -30px rgba(0,0,0,.85)}
body.theme-dark .hx-enq .formcard-hd{display:block;padding:26px 28px 0;background:none}
body.theme-dark .hx-enq .formcard-hd h2{margin:0 0 8px;font-size:clamp(22px,1.8vw,26px);font-weight:700;letter-spacing:-.01em;color:#fff;text-align:left}
body.theme-dark .hx-enq-sub{margin:0;font-size:15px;line-height:1.45;color:#c4cbd1}
body.theme-dark .hx-enq form{display:grid;gap:12px;padding:18px 28px 28px}
body.theme-dark .hx-enq .fi{position:relative}
body.theme-dark .hx-enq .fi-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:2;color:#d3d9de;pointer-events:none}
body.theme-dark .hx-enq .fi .input,body.theme-dark .hx-enq .fi .cselect-btn{min-height:52px;padding-left:50px;border-radius:12px;background-color:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:15.5px;color:#fff}
body.theme-dark .hx-enq .fi .input::placeholder{color:#c4cbd1;opacity:1}
body.theme-dark .hx-enq .fi .cselect-btn .cselect-txt,body.theme-dark .hx-enq .fi .cselect-btn.is-placeholder .cselect-txt{color:#c4cbd1;opacity:1}
body.theme-dark .hx-enq .fi .cselect-btn:not(.is-placeholder) .cselect-txt{color:#fff}
body.theme-dark .hx-enq .fi .input:focus,body.theme-dark .hx-enq .fi .cselect.open .cselect-btn{background-color:rgba(255,255,255,.12);border-color:#52c9d5;box-shadow:0 0 0 3px rgba(4,184,200,.24)}
body.theme-dark .hx-enq .cselect-btn{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23d3d9de' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
body.theme-dark .hx-enq .cselect.open .cselect-btn{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2352c9d5' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>")}
body.theme-dark .hx-enq .cta-big{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;margin-top:6px;padding:14px 22px;border-radius:12px;font-size:17px;animation:none}
body.theme-dark .hx-enq .cta-big svg{flex:none}

@media (max-width:1100px){
  body.theme-dark .hx{background:#04070b;min-height:0}
  body.theme-dark .hx-grid{grid-template-columns:1fr;gap:36px}
  body.theme-dark .hx .formwrap{max-width:520px;justify-self:start}
  body.theme-dark .hx-video::after{background:linear-gradient(180deg,rgba(4,7,11,.9) 0%,rgba(4,7,11,.8) 50%,rgba(4,7,11,.94) 100%)}
}
@media (max-width:767px){
  body.theme-dark .hx-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  body.theme-dark .hx-stats li,body.theme-dark .hx-stats li:first-child{padding:0}
  body.theme-dark .hx-stats li+li{border-left:0}
  body.theme-dark .hx-cts-t{padding-right:18px}
  body.theme-dark .hx-toggle{bottom:14px}
}

/* ---- hero fixes after the first look (22 Oct) ---- */
/* the shorthand "background" on dark fields reset the dropdown arrow's position and size: restore it for every dark dropdown */
body.theme-dark .cselect-btn{background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
body.theme-dark .cselect-btn{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23d3d9de' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
body.theme-dark .cselect.open .cselect-btn{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2352c9d5' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>")}
/* supporting line: white, as in the design (the generic .lede rule is more specific) */
body.theme-dark.home-v3 .hx-lede{color:#fff}
/* five highlights fit on one row beside the form */
body.theme-dark .hx-stats li{gap:10px;padding:0 clamp(9px,1.15vw,18px)}
body.theme-dark .hx-stats .si{width:26px;height:26px}
body.theme-dark .hx-stats .st b{font-size:clamp(19px,1.7vw,26px)}
body.theme-dark .hx-stats .st span{font-size:13px}
/* the showreel carries a caption bottom left: dim the lower part of the picture more */
body.theme-dark .hx-video::after{background:
    linear-gradient(90deg,rgba(4,7,11,.94) 0%,rgba(4,7,11,.84) 36%,rgba(4,7,11,.56) 68%,rgba(4,7,11,.46) 100%),
    linear-gradient(180deg,rgba(4,7,11,.6) 0%,rgba(4,7,11,0) 20%,rgba(4,7,11,.1) 46%,rgba(4,7,11,.9) 76%,#04070b 100%)}

/* ---- hero fixes, second look (22 Oct) ---- */
/* the hero's own field rule is more specific than the general one above: set the arrow's repeat, position and size there too */
body.theme-dark .hx .cselect-btn{background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
/* the showreel has a logo burned into its top left and a caption into its bottom left: both corners are covered by dark pools so they cannot show through */
body.theme-dark .hx-video::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(680px 280px at 6% 7%,#04070b 0%,rgba(4,7,11,.97) 48%,rgba(4,7,11,0) 100%),
  radial-gradient(980px 320px at 8% 93%,#04070b 0%,rgba(4,7,11,.97) 52%,rgba(4,7,11,0) 100%)}
body.theme-dark .hx-video::after{z-index:2;background:
    linear-gradient(90deg,rgba(4,7,11,.92) 0%,rgba(4,7,11,.78) 36%,rgba(4,7,11,.46) 68%,rgba(4,7,11,.34) 100%),
    linear-gradient(180deg,rgba(4,7,11,.6) 0%,rgba(4,7,11,0) 20%,rgba(4,7,11,.08) 46%,rgba(4,7,11,.85) 78%,#04070b 100%)}
@media (max-width:1100px){body.theme-dark .hx-video::after{background:linear-gradient(180deg,rgba(4,7,11,.9) 0%,rgba(4,7,11,.8) 50%,rgba(4,7,11,.94) 100%)}}
/* open dropdown: the focus styling uses the "background" shorthand too, so repeat the arrow's position and size for the open state */
body.theme-dark .cselect.open .cselect-btn,body.theme-dark .hx .cselect.open .cselect-btn{background-repeat:no-repeat;background-position:right 16px center;background-size:18px}

/* ---- hero readability margin (22 Oct): measured over eight frames of the showreel, the text and form must hold 4.5:1 (3:1 for the large headline) on the brightest parts of the picture ---- */
body.theme-dark .hx-video::after{background:
    linear-gradient(90deg,rgba(4,7,11,.94) 0%,rgba(4,7,11,.88) 30%,rgba(4,7,11,.82) 45%,rgba(4,7,11,.72) 60%,rgba(4,7,11,.5) 74%,rgba(4,7,11,.34) 100%),
    linear-gradient(180deg,rgba(4,7,11,.6) 0%,rgba(4,7,11,0) 20%,rgba(4,7,11,.08) 46%,rgba(4,7,11,.85) 78%,#04070b 100%)}
body.theme-dark .hx .formcard.hx-enq{background:rgba(6,14,20,.6)}
/* lighter hero (23 Oct 2026, on request: "lighten the hero a little more so the video is visible, form background more transparent").
   The headline is at most about 800 px wide (font capped at 100px), so the dark wash is held across the text (to --page-pad + 800px; the orange headline needs the picture under it dimmed by 72% or more on the brightest frames) and then lets the picture through: the empty middle and the form side are much lighter than before. The bottom wash starts later. The two blocks above are the previous values. */
body.theme-dark .hx-video::after{background:
    linear-gradient(90deg,rgba(4,7,11,.86) 0%,rgba(4,7,11,.8) calc(var(--page-pad) + 420px),rgba(4,7,11,.8) calc(var(--page-pad) + 840px),rgba(4,7,11,.3) calc(var(--page-pad) + 1020px),rgba(4,7,11,.1) calc(var(--page-pad) + 1240px),rgba(4,7,11,.05) 100%),
    linear-gradient(180deg,rgba(4,7,11,.5) 0%,rgba(4,7,11,0) 18%,rgba(4,7,11,0) 60%,rgba(4,7,11,.86) 82%,#04070b 100%)}
/* form panel: much more see-through than before (was 60% dark); the picture behind it is blurred and dimmed to 42% instead of being covered, so the small text keeps its contrast on the brightest frames */
body.theme-dark .hx .formcard.hx-enq{background:rgba(6,14,20,.2);-webkit-backdrop-filter:blur(18px) saturate(1.2) brightness(.42);backdrop-filter:blur(18px) saturate(1.2) brightness(.42)}
/* stacked layout (tablet and phone): the text fills the width, so the wash is vertical: strong behind the text, lighter behind the form (the form dims its own backdrop) */
@media (max-width:1100px){body.theme-dark .hx-video::after{background:linear-gradient(180deg,rgba(4,7,11,.86) 0%,rgba(4,7,11,.8) 44%,rgba(4,7,11,.5) 58%,rgba(4,7,11,.5) 86%,#04070b 100%)}}
body.theme-dark .hx .hx-enq-sub{color:#dde3e7}
body.theme-dark .hx-enq .fi .input::placeholder{color:#dde3e7}
body.theme-dark .hx-enq .fi .cselect-btn .cselect-txt,body.theme-dark .hx-enq .fi .cselect-btn.is-placeholder .cselect-txt{color:#dde3e7}
@media (max-width:480px){body.theme-dark .hx-cts-t i{display:none}}

/* =====================================================================================================
   HEADER (22 Oct 2026): as in the client's design screenshot (logo, Who We Are, Offerings, Clients, Gallery, Blogs, Contact Us,
   green call icon with the number), in our colours. No "Ask CTS expert" button.
   ===================================================================================================== */
body.theme-dark .hdr-in{gap:clamp(18px,2.4vw,36px)}
body.theme-dark .mainnav{gap:clamp(20px,2.5vw,40px);margin-left:clamp(16px,3vw,52px);align-items:center}
body.theme-dark .mainnav > a,body.theme-dark .hasmega > a{font-size:15.5px;font-weight:600;color:#fff;letter-spacing:0}
body.theme-dark .mainnav > a:hover,body.theme-dark .hasmega:hover > a,body.theme-dark .mainnav > a[aria-current=page]{color:#fff}
body.theme-dark .mainnav > a::after,body.theme-dark .hasmega > a::after{background:var(--dk-orange)}
body.theme-dark .tel-call{gap:11px;padding:9px 22px;border:1.5px solid rgba(82,201,213,.55);border-radius:999px;background:rgba(4,184,200,.07);color:#52c9d5;font-size:17px;font-weight:700;letter-spacing:.01em;line-height:1}
body.theme-dark .tel-call:hover{color:#8fe3ec;border-color:#52c9d5;background:rgba(4,184,200,.14)}
body.theme-dark .tel-call i{width:auto;height:auto;background:none;color:#3ddc84}
body.theme-dark .tel-call i svg{display:block;width:20px;height:20px}
@media (max-width:980px){
  body.theme-dark .tel-call{padding:8px 14px;font-size:15px;gap:8px}
  body.theme-dark .tel-call i svg{width:18px;height:18px}
}
@media (max-width:420px){
  body.theme-dark .tel-call{padding:8px 11px;font-size:14px}
}
/* header edges line up with the hero content (logo with the headline, phone with the form), a touch more presence for menu and number */
body.theme-dark .hdr-in{max-width:var(--page-max)}
body.theme-dark .mainnav{gap:clamp(24px,2.9vw,46px)}
body.theme-dark .mainnav > a,body.theme-dark .hasmega > a{font-size:16.5px}
body.theme-dark .tel-call{padding:10px 24px;font-size:18px}
@media (max-width:980px){body.theme-dark .tel-call{padding:8px 14px;font-size:15px}}
@media (max-width:420px){body.theme-dark .tel-call{padding:8px 11px;font-size:14px}}
/* an older rule (site.css) hides the header phone below 1320 px; with the "Ask CTS expert" button gone the call number stays at every width.
   Small phones show just the green call icon in a round outline (the number is still in the link and its label). */
body.theme-dark .tel-call{display:inline-flex}
@media (max-width:480px){
  body.theme-dark .tel-call{font-size:0;gap:0;padding:0;width:44px;height:44px;justify-content:center;align-items:center}
  body.theme-dark .tel-call i svg{width:21px;height:21px}
}

/* =====================================================================================================
   CLIENT SCROLLER HEADING (22 Oct 2026): as in the design image, a small "OUR CLIENTS" label above "Trusted Across Leading Organisations",
   left-aligned with the page content. The element keeps the class brandscroll-label because motion.js attaches the scroller's pause button to it.
   ===================================================================================================== */
body.theme-dark.home-v3 .credstrip{padding:clamp(44px,6vw,72px) 0 clamp(40px,5vw,60px)}
body.theme-dark .credstrip .brandscroll{margin-top:0;padding-top:0}
body.theme-dark .credstrip .brandscroll-label.cred-head{max-width:var(--page-max);margin:0 auto clamp(24px,3vw,36px);padding:0 var(--page-pad);text-align:left;text-transform:none;letter-spacing:0;font-size:inherit;font-weight:inherit;color:inherit}
body.theme-dark .cred-eyebrow,body.theme-dark .sec-eyebrow{margin:0 0 12px;font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8c9399;line-height:1.2}
body.theme-dark .cred-title{margin:0;font-family:var(--font-heading);font-size:clamp(28px,3vw,44px);font-weight:var(--w-display,800);line-height:1.08;letter-spacing:-.03em;color:#fff;text-align:left;text-wrap:balance}
body.theme-dark .credstrip .bs-pause{top:6px}
@media (max-width:767px){body.theme-dark .credstrip .brandscroll-label.cred-head{padding:0 20px}}
/* the older client-scroller label (site.css) is a centred flex row with a rule on each side: switch that off for the new heading */
body.theme-dark .clientscroll .brandscroll-label.cred-head{display:block;justify-content:flex-start;gap:0;text-align:left;font-size:inherit;letter-spacing:0;margin-bottom:clamp(24px,3vw,36px);padding:0 32px;color:inherit}
body.theme-dark .clientscroll .brandscroll-label.cred-head::before,body.theme-dark .clientscroll .brandscroll-label.cred-head::after{content:none;display:none}
@media (max-width:767px){body.theme-dark .clientscroll .brandscroll-label.cred-head{padding:0 20px}}
/* Case Studies heading block: small label, heading, one line, left-aligned (same pattern as the client scroller heading) */
body.theme-dark .sol .sechead{max-width:none;text-align:left}
body.theme-dark .sol .sechead .lede{margin-top:16px;max-width:40em}

/* =====================================================================================================
   TECHNOLOGY ALLIANCES SCROLLER HEADING (22 Oct 2026): same pattern as the client scroller, as in the design image
   ===================================================================================================== */
body.theme-dark.home-v3 .alliancesec{padding:clamp(44px,6vw,72px) 0 clamp(56px,7vw,96px);border-top:1px solid var(--dk-edge)}
body.theme-dark .alliancesec .partnerscroll{margin-top:0;padding-top:0}
body.theme-dark .partnerscroll .brandscroll-label.cred-head{display:block;max-width:var(--page-max);margin:0 auto clamp(24px,3vw,36px);padding:0 var(--page-pad);text-align:left;text-transform:none;letter-spacing:0;font-size:inherit;font-weight:inherit;color:inherit}
body.theme-dark .alliancesec .bs-pause{top:6px}
@media (max-width:767px){body.theme-dark .partnerscroll .brandscroll-label.cred-head{padding:0 20px}}

/* =====================================================================================================
   REGISTERED AND CERTIFIED (22 Oct 2026): label, heading and five logos on light tiles, as in the design image
   ===================================================================================================== */
body.theme-dark .certsec{padding:clamp(56px,7vw,100px) 0;background:var(--dk-bg);border-top:1px solid var(--dk-edge)}
body.theme-dark .certsec .sechead{max-width:none;text-align:left}
body.theme-dark .certs5{display:flex;flex-wrap:wrap;gap:24px;list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;align-items:flex-start}
body.theme-dark .certs5 li{width:min(228px,100%);display:block}
body.theme-dark .cert-tile{display:grid;place-items:center;height:136px;padding:16px 22px;border-radius:16px;background:#eef2f6;border:1px solid rgba(255,255,255,.12)}
body.theme-dark .cert-tile img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
body.theme-dark .cert-cap{display:block;margin-top:12px;text-align:center;font-size:15px;font-weight:600;color:#c4cbd1;line-height:1.3}
@media (max-width:767px){body.theme-dark .certs5{gap:16px}body.theme-dark .certs5 li{width:calc(50% - 8px)}body.theme-dark .cert-tile{height:116px}}
/* logos stay inside their tiles (flex, so the picture's percentage height has a definite box) and the tile is white so the logos' white backgrounds disappear into it */
body.theme-dark .cert-tile{display:flex;align-items:center;justify-content:center;background:#fff;height:136px;padding:16px 20px;box-sizing:border-box}
body.theme-dark .cert-tile img{max-width:100%;max-height:100%;width:auto;height:auto}
/* the AVIXA mark has white lettering that overshoots its shape, so it needs a dark ground (as in the design image) */
body.theme-dark .cert-tile.cert-dark{background:linear-gradient(180deg,#0a171d,#071016);border:1px solid rgba(255,255,255,.18)}
/* name tile used until the real D&B seal file is added */
body.theme-dark .cert-tile.cert-text{padding:16px 18px}
body.theme-dark .cert-name{font-family:var(--font-heading);font-size:clamp(20px,1.7vw,24px);font-weight:var(--w-title,700);line-height:1.1;letter-spacing:-.02em;color:#0c1015;text-align:center;text-wrap:balance}
/* the D&B seal has small lettering, so it gets more of its tile */
body.theme-dark .cert-tile.cert-seal{padding:6px 10px}

/* =====================================================================================================
   FAQS (moved up) AND BLOGS SECTION (23 Oct 2026)
   ===================================================================================================== */
/* the FAQ used to sit in the "paper" zone, which gave it its padding; now it is a plain section after the testimonials */
body.theme-dark.home-v3 .faqsec{padding:clamp(56px,7vw,104px) 0;background:var(--dk-bg);border-top:1px solid var(--dk-edge)}

body.theme-dark .blogsec{padding:clamp(56px,7vw,104px) 0;background:var(--dk-bg2);border-top:1px solid var(--dk-edge)}
body.theme-dark .blogsec .sechead{max-width:none;text-align:left}
body.theme-dark .blog3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:clamp(28px,4vw,48px)}
body.theme-dark .bcard{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 30px 26px;border-radius:20px;background:var(--dk-grad-card);border:1px solid var(--dk-edge);color:inherit;text-decoration:none;transition:transform .4s var(--ease),border-color .3s ease,box-shadow .4s var(--ease)}
body.theme-dark .bcard:hover{transform:translateY(-5px);border-color:rgba(82,201,213,.5);box-shadow:0 30px 60px -34px rgba(0,0,0,.9);text-decoration:none}
body.theme-dark .bcard:focus-visible{outline:2px solid var(--dk-teal-txt);outline-offset:3px}
body.theme-dark .bcard-cat{align-self:flex-start;max-width:100%;padding:6px 12px;border-radius:999px;background:rgba(4,184,200,.12);border:1px solid rgba(4,184,200,.34);color:var(--dk-teal-txt);font:var(--w-label,700) 11.5px/1.2 var(--font-heading);letter-spacing:.12em;text-transform:uppercase}
body.theme-dark .bcard h3{margin:0;font-family:var(--font-heading);font-size:clamp(20px,1.7vw,24px);line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:balance}
body.theme-dark .bcard p{margin:0;font-size:15.5px;line-height:1.6;color:var(--dk-body);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
body.theme-dark .bcard-go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font:var(--w-title,700) 15px/1 var(--font-heading);color:var(--dk-teal-txt)}
body.theme-dark .bcard-go svg{transition:transform .3s var(--ease)}
body.theme-dark .bcard:hover .bcard-go svg{transform:translateX(4px)}
body.theme-dark .blog-all{margin-top:clamp(28px,3.5vw,44px)}
@media (max-width:1000px){body.theme-dark .blog3{grid-template-columns:repeat(2,minmax(0,1fr))}body.theme-dark .blog3 .bcard:nth-child(3){grid-column:1/-1}}
@media (max-width:640px){body.theme-dark .blog3{grid-template-columns:1fr}body.theme-dark .blog3 .bcard:nth-child(3){grid-column:auto}}
/* "View all blogs": same outlined button with the teal arrow disc as the other secondary buttons (the shared rule only covers .sec sections) */
body.theme-dark #main .blogsec .btn-secondary{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:8px 9px 8px 22px;border:1.5px solid rgba(255,255,255,.28);border-radius:12px;background:rgba(255,255,255,.04);color:#fff!important;font:var(--w-title,700) 15.5px/1 var(--font-heading)!important;letter-spacing:-.01em;text-decoration:none;box-shadow:none;transition:transform .28s var(--ease),border-color .25s,background-color .25s}
body.theme-dark #main .blogsec .btn-secondary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:var(--dk-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304070b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .35s var(--ease),background-color .25s}
body.theme-dark #main .blogsec .btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--dk-teal-txt);transform:translateY(-2px)}
body.theme-dark #main .blogsec .btn-secondary:hover::after{transform:translateX(3px);background-color:var(--dk-teal-txt)}

/* ===== Closing form band (23 Oct 2026, second pass) =====
   As in the reference image, last block before the footer: a rounded card with a glowing teal edge, luminous orange and cyan silk waves (assets/img/home/cta-waves.svg, drawn as lines, no photo) low on the left and in the top right corner, "Let's Build Your Ideal AV Solution" with one sentence on the left, and on the right the hero form laid out 2 x 2 with a wide orange button. White fields as in the reference. Replaces the old "Tell us about your space" band (kept commented out in index.php; its .talksec rules above are unused now). */
body.theme-dark .buildband{position:relative;z-index:2;padding:clamp(0px,.8vw,12px) clamp(10px,1.4vw,28px) clamp(36px,4vw,64px);background:none;border:0}
body.theme-dark .buildband-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,88px);align-items:center;max-width:calc(var(--page-max) + 40px);margin:0 auto;padding:clamp(28px,3.4vw,54px) clamp(22px,4.6vw,80px);border-radius:22px;border:1px solid rgba(46,196,212,.55);background:url("../img/home/cta-waves.svg") left bottom/cover no-repeat,radial-gradient(70% 120% at 10% 100%,rgba(236,92,36,.16),transparent 60%),linear-gradient(100deg,#02262f 0%,#03303b 52%,#04323d 100%);box-shadow:0 0 0 1px rgba(46,196,212,.12),0 0 46px -14px rgba(46,196,212,.55),0 30px 70px -34px rgba(0,0,0,.9)}
body.theme-dark .buildband-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 8px);-webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 58%);mask-image:linear-gradient(90deg,#000 0%,transparent 58%)}
body.theme-dark .buildband-title{margin:0 0 14px;max-width:none;font-family:var(--font-heading);font-weight:var(--w-title,700);font-size:clamp(26px,2.4vw,38px);line-height:1.14;letter-spacing:-.02em;color:#fff;text-align:left}
body.theme-dark .buildband-sub{margin:0;max-width:30em;font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:#dbe3e7;text-wrap:balance}
body.theme-dark .buildband-form{justify-self:end;width:100%;max-width:740px}
body.theme-dark .buildband-form form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0}
body.theme-dark .buildband-form .fi{position:relative;min-width:0}
body.theme-dark .buildband-form .fi-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:2;color:#33444e;pointer-events:none}
body.theme-dark .buildband-form .fi .input,body.theme-dark .buildband-form .fi .cselect-btn{width:100%;min-height:52px;padding:0 44px 0 50px;border-radius:10px;background-color:#fff;border:1px solid transparent;font-size:15.5px;color:#14222b;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
body.theme-dark .buildband-form .fi .input::placeholder{color:#52606a;opacity:1}
body.theme-dark .buildband-form .fi .cselect-btn .cselect-txt,body.theme-dark .buildband-form .fi .cselect-btn.is-placeholder .cselect-txt{color:#52606a;opacity:1}
body.theme-dark .buildband-form .fi .cselect-btn:not(.is-placeholder) .cselect-txt{color:#14222b}
body.theme-dark .buildband-form .fi .input:hover,body.theme-dark .buildband-form .fi .cselect-btn:hover{border-color:rgba(4,184,200,.6)}
body.theme-dark .buildband-form .fi .input:focus,body.theme-dark .buildband-form .fi .cselect.open .cselect-btn{background-color:#fff;border-color:#04b8c8;box-shadow:0 0 0 3px rgba(82,201,213,.45);outline:0}
body.theme-dark .buildband-form .cselect-btn,body.theme-dark .buildband-form .cselect-btn:focus,body.theme-dark .buildband-form .cselect-btn:hover{background-repeat:no-repeat;background-position:right 16px center;background-size:18px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2333444e' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")}
body.theme-dark .buildband-form .cselect.open .cselect-btn{background-repeat:no-repeat;background-position:right 16px center;background-size:18px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23067d89' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'/></svg>")}
body.theme-dark .buildband-form .cta-big{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;margin:0;padding:14px 22px;border-radius:10px;font-size:17px;animation:none}
body.theme-dark .buildband-form .cta-big svg{flex:none}
@media (max-width:900px){body.theme-dark .buildband-card{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 20px 84px;background-size:auto 260px,auto,auto}body.theme-dark .buildband-form{justify-self:stretch;max-width:none}}
@media (max-width:560px){body.theme-dark .buildband-form form{grid-template-columns:minmax(0,1fr)}}

/* ===== Featured Case Studies: taller, roomier cards (23 Oct 2026, on request: "increase the height and width so this looks more clean") =====
   Rows were 200 to 260 px; now 230 to 340 px, a little more air between the cards and inside them, and a larger title. The width follows the page width token (--page-max). */
body.theme-dark .bento{grid-auto-rows:clamp(230px,19vw,340px);gap:clamp(16px,1.4vw,24px)}
body.theme-dark .bt-in{padding:clamp(22px,1.9vw,32px);gap:10px}
body.theme-dark .bt-t{font-size:clamp(22px,2.05vw,32px);line-height:1.08}
@media (max-width:1000px){body.theme-dark .bento{grid-auto-rows:clamp(220px,38vw,320px)}}
@media (max-width:560px){body.theme-dark .bento{grid-auto-rows:260px}}

/* =====================================================================================================
   SECTIONS FROM "SPACES WE BUILD" DOWNWARDS (23 Oct 2026, on request: "this is also not looking great, after this section please work on all of it")
   One look with the sections above: small label, one calm heading, cards on the same dark panel, teal and orange only (the red and yellow
   accents of the old light design are gone), wide layouts that use the new page width.
   ===================================================================================================== */

/* ---- Spaces we build (pinned stage): slim heading row, bigger stage, clean image, numbered slides ---- */
body.theme-dark .story-top{align-items:flex-end}
/* the section heading is the same size as every other section heading (--h2-size) and stays larger than the slide title below it */
body.theme-dark .story-top .h2{font-size:var(--h2-size,clamp(34px,4.9vw,70px));line-height:1;max-width:none;margin:0}
body.theme-dark .story-head .sec-eyebrow{margin-bottom:10px}
body.theme-dark .story{counter-reset:sl 0 tot var(--n,6)}
body.theme-dark .story-slide{counter-increment:sl}
body.theme-dark .story-slide:nth-child(odd){--c:#ec5c24}
body.theme-dark .story-slide:nth-child(even){--c:#04b8c8}
body.theme-dark .story-copy::before{content:counter(sl,decimal-leading-zero) " / " counter(tot,decimal-leading-zero);display:block;margin-bottom:16px;font:var(--w-title,600) 13px/1 var(--font-heading);letter-spacing:.22em;color:var(--c)}
body.theme-dark .story-copy h3{font-size:clamp(26px,2.5vw,42px);line-height:1.05;margin-bottom:18px}
body.theme-dark .story-copy .apps{max-width:32em;margin-bottom:26px}
body.theme-dark .story-copy ul{gap:0;max-width:34em;margin-bottom:34px}
body.theme-dark .story-copy li{padding:13px 0;border-top:1px solid var(--dk-edge)}
body.theme-dark .story-copy li:last-child{border-bottom:1px solid var(--dk-edge)}
body.theme-dark .story-fig::before{inset:10% -3% -8% 12%;border-radius:40px;background:var(--c);filter:blur(70px);opacity:.3;transform:none!important}
body.theme-dark .story-fig img{border-radius:22px;border:1px solid var(--dk-edge2);box-shadow:0 40px 90px -34px rgba(0,0,0,.9)}
html.js body.theme-dark .story-dots i:nth-child(n).on{background:#ec5c24}
@media (min-width:901px){
  html.js body.theme-dark .story-slides{margin-top:clamp(14px,2.4vh,28px);margin-bottom:clamp(22px,4vh,44px)}
  html.js body.theme-dark .story-slide{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  html.js body.theme-dark .story-fig{aspect-ratio:16/10;height:auto;max-height:100%;width:100%;align-self:center}
}

/* ---- Three reasons: same cards, teal and orange glows, a little shorter ---- */
body.theme-dark .why-card{min-height:300px}
body.theme-dark .why-card:nth-child(3){--k:#ec5c24}
body.theme-dark .why-card:nth-child(2){--k:#04b8c8}

/* ---- Where our systems run: one panel (picture and text side by side, no overlap), tabs on the left ---- */
body.theme-dark #main .indsec h2.h2::before{display:none}
body.theme-dark .indsec .sec-eyebrow{margin-bottom:12px}
body.theme-dark.home-v3 .indtabs{grid-template-columns:minmax(260px,.55fr) minmax(0,2.2fr);gap:clamp(20px,2.4vw,40px)}
body.theme-dark.home-v3 .indpanel{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;overflow:hidden;border:1px solid var(--dk-edge2);border-radius:22px;background:var(--dk-grad-card);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
body.theme-dark.home-v3 .indpanel img{border:0;border-radius:0;box-shadow:none;min-height:440px}
body.theme-dark.home-v3 .indpanel-copy{margin:0;border:0;border-radius:0;background:none;box-shadow:none;padding:clamp(28px,3vw,52px);align-self:center}
@media (max-width:1000px){body.theme-dark.home-v3 .indtabs{grid-template-columns:1fr}body.theme-dark.home-v3 .indpanel{grid-template-columns:1fr}body.theme-dark.home-v3 .indpanel img{min-height:260px}body.theme-dark.home-v3 .indpanel-copy{margin:0;padding:24px 22px 28px}}
body.theme-dark.home-v3 .indtabs-list [role=tab]:nth-child(odd){--tcol:#ec5c24}
body.theme-dark.home-v3 .indtabs-list [role=tab]:nth-child(even){--tcol:#04b8c8}

/* ---- About Us: text and picture side by side, the "Why us" card under the picture, the four facts and the certificates across the full width ---- */
body.theme-dark #main .aboutsec h2.h2::before{display:none}
body.theme-dark .aboutsec .sec-eyebrow{margin-bottom:12px}
body.theme-dark .aboutsec .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"prose washed" "prose card" "facts facts" "cred cred";grid-template-rows:auto 1fr auto auto;gap:24px clamp(32px,4vw,72px);align-items:start}
body.theme-dark .aboutsec .split > div:nth-child(2){display:contents}
body.theme-dark .aboutsec .prose{grid-area:prose;max-width:none}
body.theme-dark .aboutsec .washed{grid-area:washed}
body.theme-dark .aboutsec .washed img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
body.theme-dark .aboutsec .card{grid-area:card;margin-top:0!important}
body.theme-dark .aboutsec .card .dots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 28px}
body.theme-dark .aboutsec .card .dots li:nth-child(odd)::before{background:#ec5c24}
body.theme-dark .aboutsec .card .dots li:nth-child(even)::before{background:#04b8c8}
body.theme-dark .aboutsec .factgrid{grid-area:facts;grid-template-columns:repeat(4,minmax(0,1fr));margin:12px 0 0}
body.theme-dark .aboutsec .credrow{grid-area:cred;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:22px}
body.theme-dark .aboutsec .credrow .mini{margin:0!important}
@media (max-width:900px){
  body.theme-dark .aboutsec .split{grid-template-columns:minmax(0,1fr);grid-template-areas:"prose" "washed" "card" "facts" "cred"}
  body.theme-dark .aboutsec .card .dots{grid-template-columns:minmax(0,1fr)}
  body.theme-dark .aboutsec .factgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Guide (the long read): the pictures sit beside the text instead of under it, so the page width is used; the picture stays in view while its two articles are read ---- */
body.theme-dark #main section.longread .lr-article h2.h2{font-size:clamp(26px,2.6vw,40px)!important}
body.theme-dark .lr-article .prose p{font-size:17.5px;line-height:1.75}
@media (min-width:1101px){
  body.theme-dark .longread-body{display:grid;grid-template-columns:minmax(0,46rem) minmax(0,1fr);column-gap:clamp(36px,4vw,72px);row-gap:56px;align-items:start}
  body.theme-dark .longread-body > .lr-article{grid-column:1;margin-top:0!important}
  body.theme-dark .longread-body > .lr-figure{grid-column:2;grid-row:span 2;position:sticky;top:110px;margin-top:0!important}
  body.theme-dark .lr-figure img{max-height:none;aspect-ratio:4/3;border-radius:22px;border:1px solid var(--dk-edge2);box-shadow:0 36px 70px -34px rgba(0,0,0,.95)}
}
body.theme-dark #main section.aboutsec .split{row-gap:24px;column-gap:clamp(32px,4vw,72px)}
@media (max-width:900px){body.theme-dark #main section.aboutsec .split{row-gap:22px}}
/* slide title: the bold type profile (dark-type-bold.css) sets it to 62 px, which is nearly the size of the section heading; keep it clearly smaller */
html body.theme-dark.type-bold .story-copy h3{font-size:clamp(26px,2.5vw,44px);letter-spacing:-.03em;line-height:1.05}
/* inner titles stay clearly below the section heading (70 px at most): panel title in "Where our systems run" matches the slide title above */
html body.theme-dark.home-v3 .indpanel-copy h3{font-size:clamp(26px,2.5vw,44px);letter-spacing:-.03em;line-height:1.05}
/* booklet cover: the picture is a transparent PNG, but the old light-design rule put a box-shadow on its rectangle, which showed as a dark square around the book; the shape-following drop-shadow from site.css is kept */
body.theme-dark .magnet-cover img{box-shadow:none}

/* "Download Brochure" side tab (home page): the download icon sits right under the end of the text, and the pair is centred in the tab, instead of the icon being pinned to the bottom edge with a gap */
body.theme-dark .rail-right .railbtn-dl{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:12px;height:auto;min-height:0;padding:24px 0}
body.theme-dark .rail-right .railbtn-dl span{position:static;left:auto;top:auto;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
body.theme-dark .rail-right .railbtn-dl svg{position:static;left:auto;bottom:auto;transform:none;width:22px;height:22px;flex:none}

/* ===== "Registered and Certified": centred, logos without tiles (23 Oct 2026, on request) =====
   The five logos are transparent PNGs (assets/img/certs) sitting straight on the page, each in an equal-sized slot so they read as one row; the heading block and the captions are centred. */
body.theme-dark .certsec .sechead{text-align:center;margin-left:auto;margin-right:auto}
body.theme-dark .certsec .sechead .h2{text-align:center}
body.theme-dark #main .certsec h2.h2::before{display:none}
body.theme-dark .certs5{justify-content:center;align-items:flex-start;gap:clamp(20px,3vw,56px)}
body.theme-dark .certs5 li{width:clamp(150px,15vw,230px);text-align:center}
body.theme-dark .cert-tile,body.theme-dark .cert-tile.cert-seal,body.theme-dark .cert-tile.cert-dark{background:none;border:0;box-shadow:none;border-radius:0;padding:0;height:clamp(96px,9vw,132px)}
body.theme-dark .cert-tile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
body.theme-dark .cert-cap{text-align:center}
@media (max-width:767px){body.theme-dark .certs5{gap:22px 16px}body.theme-dark .certs5 li{width:calc(50% - 8px)}body.theme-dark .cert-tile,body.theme-dark .cert-tile.cert-seal{height:96px}}

/* Testimonials (home page): the small label replaces the teal bar above the heading, as in the other sections */
body.theme-dark #main .quotesec h2.h2::before{display:none}
body.theme-dark .quotesec .sec-eyebrow{margin-bottom:12px}


/* =====================================================================================================
   GLASS BUTTONS AND FAQ TOGGLES (23 Oct 2026, on request: "these buttons in a cooler way", "even this transparent button")
   The transparent (outline) buttons become glass: a frosted fill with a light-to-teal gradient edge, a light sweep across on hover,
   the edge turning teal to orange, and a teal arrow disc that slides. The FAQ "+" tiles become round buttons: teal ring and plus,
   a glow on hover, and when open an orange disc with a minus.
   ===================================================================================================== */
body.theme-dark #main .btn-line,
body.theme-dark #main .sec .btn-secondary,
body.theme-dark #main .blogsec .btn-secondary,
body.theme-dark #main .pagehero .btn-secondary,
body.theme-dark #main .finalcta .btn-secondary,
body.theme-dark #main section.sec:has(.faqs) .split.narrow-left > div:first-child .btn-secondary{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:8px 10px 8px 24px;
  border:1.5px solid transparent;border-radius:14px;
  background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.24) 50%,transparent 66%) -160% 0/260% 100% no-repeat,rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff!important;font:var(--w-title,700) 16px/1 var(--font-heading)!important;letter-spacing:-.01em;text-decoration:none;
  box-shadow:0 12px 28px -16px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .3s var(--ease),box-shadow .3s ease,background-position .8s var(--ease)}
/* the gradient edge: a ring cut out of a gradient, so the glass inside stays transparent */
body.theme-dark #main .btn-line::before,
body.theme-dark #main .sec .btn-secondary::before,
body.theme-dark #main .blogsec .btn-secondary::before,
body.theme-dark #main .pagehero .btn-secondary::before,
body.theme-dark #main .finalcta .btn-secondary::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.14) 28%,rgba(82,201,213,.75) 50%,#8fe3ec 66%,#ec5c24 100%) 0 0/220% 220%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:background-position .6s var(--ease)}
body.theme-dark #main .btn-line:hover,
body.theme-dark #main .sec .btn-secondary:hover,
body.theme-dark #main .blogsec .btn-secondary:hover,
body.theme-dark #main .pagehero .btn-secondary:hover,
body.theme-dark #main .finalcta .btn-secondary:hover,
body.theme-dark #main section.sec:has(.faqs) .split.narrow-left > div:first-child .btn-secondary:hover{
  transform:translateY(-3px);background-position:260% 0,0 0;
  box-shadow:0 18px 36px -16px rgba(4,184,200,.6),0 0 0 4px rgba(4,184,200,.12),inset 0 1px 0 rgba(255,255,255,.2)}
body.theme-dark #main .btn-line:hover::before,
body.theme-dark #main .sec .btn-secondary:hover::before,
body.theme-dark #main .blogsec .btn-secondary:hover::before,
body.theme-dark #main .pagehero .btn-secondary:hover::before,
body.theme-dark #main .finalcta .btn-secondary:hover::before{background-position:100% 100%}
body.theme-dark #main .btn-line:active,body.theme-dark #main .sec .btn-secondary:active{transform:translateY(-1px) scale(.98)}
/* the arrow disc: the outline buttons that had none (Ask CTS expert) get the same one the others have */
body.theme-dark #main .btn-line::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--dk-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304070b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s var(--ease),background-color .25s}
body.theme-dark #main .btn-line:hover::after,body.theme-dark #main .sec .btn-secondary:hover::after,body.theme-dark #main .blogsec .btn-secondary:hover::after,
body.theme-dark #main .pagehero .btn-secondary:hover::after,
body.theme-dark #main .finalcta .btn-secondary:hover::after{transform:translateX(3px);background-color:var(--dk-teal-txt)}
body.theme-dark #main .btn-secondary > svg{flex:none;color:var(--dk-teal-txt)}

/* FAQ: round plus / minus buttons */
body.theme-dark .faqs details:nth-child(n) summary::after{
  content:"";width:42px;height:42px;flex:none;border-radius:50%;border:1px solid rgba(82,201,213,.5);transform:none;
  background:linear-gradient(#52c9d5,#52c9d5) center/14px 2px no-repeat,linear-gradient(#52c9d5,#52c9d5) center/2px 14px no-repeat,radial-gradient(circle at 30% 25%,rgba(82,201,213,.3),rgba(4,184,200,.06) 70%);
  box-shadow:0 0 0 0 rgba(82,201,213,0);
  transition:transform .4s var(--ease),box-shadow .3s ease,border-color .3s ease,background-size .3s ease}
body.theme-dark .faqs summary:hover::after{border-color:#52c9d5;box-shadow:0 0 0 5px rgba(82,201,213,.14),0 8px 22px -8px rgba(4,184,200,.7)}
body.theme-dark .faqs details[open]:nth-child(n) summary::after{
  transform:rotate(180deg);border-color:transparent;
  background:linear-gradient(#fff,#fff) center/14px 2px no-repeat,linear-gradient(#fff,#fff) center/2px 0 no-repeat,linear-gradient(135deg,var(--cta-from),var(--cta-to));
  box-shadow:0 10px 24px -8px rgba(236,92,36,.8),0 0 0 4px rgba(236,92,36,.16)}
body.theme-dark .faqs details{transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
body.theme-dark .faqs details:not([open]):hover{border-color:rgba(82,201,213,.38)}
/* (an orange bar on the left edge of the open row was removed 23 Oct: a thick one-sided accent border is a generic pattern; the teal border and the orange disc carry the open state) */
@media (prefers-reduced-motion:reduce){body.theme-dark #main .btn-line,body.theme-dark #main .sec .btn-secondary,body.theme-dark .faqs details summary::after,body.theme-dark #main .btn-line::before,body.theme-dark #main .sec .btn-secondary::before{transition:none}}
@media (max-width:560px){body.theme-dark #main .btn-line,body.theme-dark #main .sec .btn-secondary{min-height:50px}}
/* "Ask CTS expert" in the pinned stage sits beside the 56 px orange button: same height */
body.theme-dark .story .btn-line{min-height:56px}


/* =====================================================================================================
   OFFERINGS MENU (23 Oct 2026, on request: "menu is also not looking that great")
   Was: a 900 px box hanging off the left edge, 700 px tall, three bare lists with tiny grey headings.
   Now: a glass panel whose left edge lines up with the logo, three columns as cards with an icon and a clear heading, compact rows (about 430 px of list instead
   of 560), a hover that lights the row and slides an arrow in, and an "Offerings" label with the "All solutions" pill on one top row. Same links, same order.
   ===================================================================================================== */
@media (min-width:1181px){
  body.theme-dark .mega{
    left:var(--page-pad);right:auto;width:min(1080px,calc(100% - 2 * var(--page-pad)));top:calc(100% + 8px);padding:0;border-radius:22px;overflow:hidden;
    border:1px solid rgba(82,201,213,.3);
    background:radial-gradient(520px 260px at 0% 0%,rgba(4,184,200,.16),transparent 70%),radial-gradient(480px 260px at 100% 100%,rgba(236,92,36,.13),transparent 70%),linear-gradient(180deg,#0b1920,#070e13);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:0 50px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.04) inset}
  body.theme-dark .megatop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px 16px 30px;background:none;border-bottom:1px solid rgba(255,255,255,.08)}
  body.theme-dark .megatop-t{font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8c9399}
  body.theme-dark .megatop a{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:0 16px 0 18px;border:1px solid rgba(82,201,213,.4);border-radius:999px;background:rgba(4,184,200,.1);color:#fff;font-size:14.5px;font-weight:700;letter-spacing:-.005em;transition:background-color .25s,border-color .25s,transform .25s var(--ease)}
  body.theme-dark .megatop a:hover{background:rgba(4,184,200,.22);border-color:#52c9d5;color:#fff;transform:translateX(2px)}
  body.theme-dark .megatop a svg{color:var(--dk-teal-txt);transition:transform .3s var(--ease)}
  body.theme-dark .megatop a:hover svg{transform:translateX(3px)}
  body.theme-dark .megagrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:22px 24px 26px}
  body.theme-dark .megacol{padding:18px 14px 12px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.03)}
  body.theme-dark .megacol .megah{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:0 6px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;font-weight:700;letter-spacing:-.01em;text-transform:none;line-height:1.25;color:#fff}
  body.theme-dark .megaic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid rgba(82,201,213,.4);background:rgba(4,184,200,.12);color:var(--dk-teal-txt)}
  body.theme-dark .megacol:nth-child(2) .megaic{border-color:rgba(236,92,36,.45);background:rgba(236,92,36,.13);color:#ff8a57}
  body.theme-dark .megacol ul{gap:1px}
  body.theme-dark .megacol a{position:relative;display:flex;align-items:center;min-height:36px;margin:0;padding:6px 34px 6px 10px;border-radius:10px;transition:background-color .2s,transform .25s var(--ease)}
  body.theme-dark .megacol a b{font-size:14.5px;font-weight:600;color:#d5dadd;transition:color .2s}
  body.theme-dark .megacol a::after{content:"";position:absolute;right:12px;top:50%;width:16px;height:16px;margin-top:-8px;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s var(--ease);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c9d5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat}
  body.theme-dark .megacol a:hover,body.theme-dark .megacol a:focus-visible{background:linear-gradient(90deg,rgba(4,184,200,.16),rgba(4,184,200,.04));transform:translateX(3px)}
  body.theme-dark .megacol a:hover b,body.theme-dark .megacol a:focus-visible b{color:#fff}
  body.theme-dark .megacol a:hover::after,body.theme-dark .megacol a:focus-visible::after{opacity:1;transform:none}
  body.theme-dark .megacol a:focus-visible{outline:2px solid var(--dk-teal-txt);outline-offset:-2px}
}
/* phone and tablet menu (stacked, inside the slide-down nav): same headings with icons, no cards */
/* the slide-down menu (burger) is used up to 1180 px wide: dark drawer (it was white, with white links, between 981 and 1180 px) */
@media (max-width:1180px){
  body.theme-dark .mainnav.open{margin:0;padding-left:var(--page-pad);padding-right:var(--page-pad);background:#06101a;border-bottom:1px solid var(--dk-edge2);box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
  body.theme-dark .megatop-t{display:none}
  body.theme-dark .megacol .megah{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;text-transform:none;letter-spacing:-.01em;color:#fff}
  body.theme-dark .megaic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;border:1px solid rgba(82,201,213,.4);background:rgba(4,184,200,.12);color:var(--dk-teal-txt)}
  body.theme-dark .megacol:nth-child(2) .megaic{border-color:rgba(236,92,36,.45);background:rgba(236,92,36,.13);color:#ff8a57}
  body.theme-dark .megacol .megah > span:not(.megaic){flex:1;text-align:left}
  /* the list sits flat in the drawer: no box around it, a divider between the three groups */
  body.theme-dark .mega{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;padding:4px 0 0;width:auto;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.theme-dark .megacol{border-top:1px solid rgba(255,255,255,.08)}
  body.theme-dark .megacol .megah{padding:8px 0;border:0;margin:0}
  body.theme-dark .megatop{padding:2px 0 12px;background:none;border:0}
  body.theme-dark .megatop a{display:inline-flex;align-items:center;gap:8px;color:var(--dk-teal-txt);font-size:15px;font-weight:700}
  body.theme-dark .megacol a{display:flex;align-items:center;min-height:44px;padding:8px 10px 8px 44px;margin:0;border-radius:10px}
  body.theme-dark .megacol a b{font-size:15px;font-weight:600;color:#d5dadd}
  body.theme-dark .megacol a:hover{background:rgba(4,184,200,.1)}
}
@media (prefers-reduced-motion:reduce){body.theme-dark .megacol a,body.theme-dark .megacol a::after,body.theme-dark .megatop a,body.theme-dark .megatop a svg{transition:none}}

/* ---- dropdown arrow, every state, every form (27 Oct 2026) ----
   Older rules (site.css ".pagehero.banner .formcard .input:focus" and similar) use the "background" shorthand, which reset the arrow to repeat across the whole field
   whenever the dropdown was focused or open (inner-page hero forms). The arrow's repeat, position and size are therefore fixed here for all states and all forms. */
body.theme-dark .cselect-btn,body.theme-dark .cselect-btn:hover,body.theme-dark .cselect-btn:focus,body.theme-dark .cselect-btn:focus-visible,body.theme-dark .cselect-btn:active,
body.theme-dark .cselect.open .cselect-btn,body.theme-dark .cselect.open .cselect-btn:hover,body.theme-dark .formcard .cselect-btn,body.theme-dark .formcard .cselect-btn:focus,body.theme-dark .formcard .cselect.open .cselect-btn,
body.theme-dark .pagehero.banner .formcard .cselect-btn,body.theme-dark .pagehero.banner .formcard .cselect-btn:focus,body.theme-dark .pagehero.banner .formcard .cselect.open .cselect-btn{
  background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:18px!important}

/* Chat welcome message (30 Oct 2026, 20/10 list "Chatbot: First Interaction"): greeting in bold, the second sentence on its own line below it */
body.theme-dark .botmsg.botwelcome{padding:14px 16px;font-size:15px;line-height:1.45}
body.theme-dark .botmsg.botwelcome b{display:block;margin-bottom:4px;font-size:15.5px;font-weight:700;color:#0c1730}
body.theme-dark .botmsg.botwelcome span{display:block;color:#44506a}
body.theme-dark .botchip-ic svg{flex:none;color:#d4451a}
body.theme-dark .botchip-ic:hover svg{color:#fff}

/* ---- 30 Oct 2026 client list ---- */
/* "Increase the transparency because the video isn't visible", second look (3 Nov 2026, "I want an overall overlay and not this patchy overlay"): ONE even dark tint over the whole picture, plus the usual smooth fade into the page at the very bottom. The earlier version (a left-to-right wash plus two dark pools over the burned-in logo and caption) is gone because it looked patchy. The video's own logo (top left) and caption (bottom left) now show through the tint. */
body.theme-dark .hx-video::before{content:none;background:none}
body.theme-dark .hx-video::after{background:
    linear-gradient(rgba(4,7,11,.32),rgba(4,7,11,.32)),
    linear-gradient(180deg,rgba(4,7,11,0) 0%,rgba(4,7,11,0) 82%,rgba(4,7,11,.45) 92%,#04070b 100%)}
@media (max-width:1100px){body.theme-dark .hx-video::after{background:
    linear-gradient(rgba(4,7,11,.4),rgba(4,7,11,.4)),
    linear-gradient(180deg,rgba(4,7,11,0) 0%,rgba(4,7,11,0) 80%,#04070b 100%)}}
/* "The scroller has some logos that look like cutouts": many client logos are pictures with a white background, which showed as a white box on the grey tile. The client tiles are now white, so the picture and the tile are one surface (the technology alliances tiles are untouched). */
body.theme-dark .clientscroll .brandtrack li.tile{background:#fff}
/* 30 Oct list, second look (2 Nov 2026, "he wants it how it is in the screenshot", first scroller only): the client logos are white single-colour versions straight on the dark page, no tiles, as in the client's design image. The files are assets/img/clients/mono/<slug>.png; the white tile rule above stays for any client logo without a mono file. The technology alliances scroller is untouched. */
body.theme-dark .clientscroll .brandtrack li.tile.mono{background:none!important;border:0;box-shadow:none}
body.theme-dark .clientscroll .brandtrack li.tile.mono img{opacity:.92}

/* ---- One button size on every page (3 Nov 2026, "a constant size for the buttons on all pages") ----
   Before: the same kind of button was 34, 36, 44, 46, 52, 54 or 62 px high with text from 14 to 17.5 px (for example "Book an advice session" was 48 px high next to "Learn more about us" at 52 px).
   Now every button inside the page content is at least 52 px high with 16 px text and the same rounded shape; the arrow-disc buttons already sit at 52 px, the plain ones get 0 vertical padding so the height is the minimum, not more. Left alone: the mobile bottom bar, pagination, icon buttons and the header. */
html body.theme-dark #main .btn:not(.btn-icon):not(.pagination *){min-height:52px!important;font-size:16px!important;line-height:1.2!important;border-radius:999px!important;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box}
html body.theme-dark #main .btn-primary:not(.pagination *),html body.theme-dark #main .btn-sage:not(.pagination *),html body.theme-dark #main .btn-ink:not(.pagination *),html body.theme-dark #main .btn-cream:not(.pagination *),html body.theme-dark #main .btn-ghost:not(.pagination *){padding:0 28px!important}
html body.theme-dark #main .btn-primary.btn-block,html body.theme-dark #main .btn-primary.cta-big{width:100%}