/* =====================================================================================================
   Bitsy dark theme for the inner pages (27 October 2026, on request: "follow this theme for all the pages")
   Loaded by includes/header.php on every dark page that is not the home page (the home page has its own rules in dark.css).
   Same look as the home page: near-black page, cards a shade lighter with a 1px edge, orange for the main action, teal for links and icons,
   white headings, grey text, rounded-rectangle buttons, a glass form on the hero, the "glass" outline buttons from dark.css.
   Structure, copy and behaviour are the existing pages; this file only restyles them. To switch it off for all pages set $bitsyDarkAll to false in includes/header.php.
   ===================================================================================================== */

/* ---------------------------------------- page bands ---------------------------------------- */
body.theme-dark:not(.home-v3) #main > section.sec{background:var(--dk-bg);border:0}
body.theme-dark:not(.home-v3) #main > section.sec:nth-of-type(2n){background:var(--dk-bg2);border-top:1px solid var(--dk-edge);border-bottom:1px solid var(--dk-edge)}
body.theme-dark:not(.home-v3) #main > section.sec:has(> .wrap > .quotes){background:var(--dk-bg)!important}
body.theme-dark:not(.home-v3) .kicker{display:inline-block;margin:0 0 12px;padding:0;border:0;background:none;font:600 12.5px/1.2 var(--font-body,inherit);letter-spacing:.2em;text-transform:uppercase;color:#8c9399}
body.theme-dark:not(.home-v3) #main section.sec h2.h2::before{background:var(--dk-teal)}
body.theme-dark:not(.home-v3) .prose p,body.theme-dark:not(.home-v3) .prose li{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .prose h3,body.theme-dark:not(.home-v3) .prose strong,body.theme-dark:not(.home-v3) #main h3{color:var(--dk-text)}
body.theme-dark:not(.home-v3) .prose a:not(.btn){color:var(--dk-teal-txt)}
body.theme-dark:not(.home-v3) .prose ul{list-style:none}
body.theme-dark:not(.home-v3) .prose ul li::before{background-color:var(--dk-orange)}
body.theme-dark:not(.home-v3) .lede{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .mini{color:var(--dk-teal-txt)}
body.theme-dark:not(.home-v3) .privacy{color:var(--dk-mute)}

/* ---------------------------------------- hero banner ---------------------------------------- */
body.theme-dark:not(.home-v3) .pagehero.banner{
  --hero-overlay:linear-gradient(90deg,rgba(4,7,11,.92) 0%,rgba(4,7,11,.82) 42%,rgba(4,7,11,.52) 100%),linear-gradient(180deg,rgba(4,7,11,.5) 0%,rgba(4,7,11,0) 24%,rgba(4,7,11,0) 66%,#04070b 97%);
  background-color:#04070b;background-clip:padding-box;border-bottom:1px solid var(--dk-edge)} /* padding-box: the picture is cropped by "cover" and would otherwise show through the 1px border as a bright line */
body.theme-dark:not(.home-v3) .pagehero.banner::before,body.theme-dark:not(.home-v3) .pagehero.banner::after,
body.theme-dark:not(.home-v3) .pagehero.banner .blob,body.theme-dark:not(.home-v3) .pagehero.banner .formwrap::before,body.theme-dark:not(.home-v3) .pagehero.banner .formwrap::after{display:none}
body.theme-dark:not(.home-v3) .pagehero.banner h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5)}
body.theme-dark:not(.home-v3) .pagehero.banner .lede{color:#e3e8ec}
body.theme-dark:not(.home-v3) .pagehero.banner .crumbs{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#d5d7d8}
body.theme-dark:not(.home-v3) .pagehero.banner .crumbs a{color:#fff}
body.theme-dark:not(.home-v3) .pagehero.banner .tag-accent-2{background:linear-gradient(135deg,var(--cta-from),var(--cta-to));color:#fff;border:0}
body.theme-dark:not(.home-v3) .pagehero.banner .tag-outline{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.05)}
body.theme-dark:not(.home-v3) .pagehero.banner .acts .btn{border-radius:14px}
body.theme-dark:not(.home-v3) .pagehero.banner .herostats{border-top:1px solid rgba(255,255,255,.16)}
body.theme-dark:not(.home-v3) .pagehero.banner .herostats b{color:#fff}
body.theme-dark:not(.home-v3) .pagehero.banner .herostats span{color:#c4cbd1;font-weight:600}
body.theme-dark:not(.home-v3) .pagehero.banner .badges img{background:#eef2f6}

/* the hero form: the same glass card as the home page */
body.theme-dark:not(.home-v3) .pagehero.banner .formcard{
  background:rgba(6,14,20,.45);-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);overflow:hidden}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard-hd{display:block;background:none;padding:26px 28px 0}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard-hd h2{margin:0;font-size:clamp(22px,1.8vw,28px);font-weight:700;letter-spacing:-.01em;color:#fff;text-align:left}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard form{padding:18px 28px 28px;gap:14px}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .field label{font-family:inherit;font-size:14px;font-weight:600;color:#e3e8ec}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .input,
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .cselect-btn{background-color:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;color:#fff;min-height:50px;box-shadow:none}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .input:hover,body.theme-dark:not(.home-v3) .pagehero.banner .formcard .cselect-btn:hover{border-color:rgba(255,255,255,.34)}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .input:focus,body.theme-dark:not(.home-v3) .pagehero.banner .formcard .input:focus-visible,body.theme-dark:not(.home-v3) .pagehero.banner .formcard .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);outline:0}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .input::placeholder{color:#c4cbd1;opacity:1}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .phonefield .cc{color:#fff;font-weight:600}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .cselect-btn .cselect-txt{color:#fff}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .cselect-btn.is-placeholder .cselect-txt{color:#c4cbd1;opacity:1}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .privacy{color:#c4cbd1}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .cta-big{border-radius:12px;min-height:54px}

/* ---------------------------------------- cards and surfaces ---------------------------------------- */
body.theme-dark:not(.home-v3) .card,body.theme-dark:not(.home-v3) .card.elev-sm,body.theme-dark:not(.home-v3) .panel{background:var(--dk-grad-card);border:1px solid var(--dk-edge);border-radius:20px;box-shadow:none;color:var(--dk-body)}
body.theme-dark:not(.home-v3) .card .mini,body.theme-dark:not(.home-v3) .whycard .mini{color:var(--dk-teal-txt)}
body.theme-dark:not(.home-v3) .dots li{color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .dots li::before{background-color:var(--dk-orange)}
body.theme-dark:not(.home-v3) .formcard{background:var(--dk-grad-card);border:1px solid var(--dk-edge2);border-radius:20px;box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
body.theme-dark:not(.home-v3) .washed{border:1px solid var(--dk-edge);border-radius:20px!important;box-shadow:0 30px 60px -34px rgba(0,0,0,.9)!important;overflow:hidden}
body.theme-dark:not(.home-v3) .washed img{display:block}

/* ---------------------------------------- hero headline highlight ---------------------------------------- */
body.theme-dark:not(.home-v3) .mk::before{display:none}
body.theme-dark:not(.home-v3) .pagehero.banner h1 .mk,body.theme-dark:not(.home-v3) .pagehero.banner h1.is-split .mk{color:var(--dk-orange)}

/* ---------------------------------------- "At a glance" band under the offering heroes ---------------------------------------- */
body.theme-dark:not(.home-v3) .glance{background:linear-gradient(180deg,#07121a 0%,#05090e 100%);border-bottom:1px solid var(--dk-edge)}
body.theme-dark:not(.home-v3) .glance-grid>div + div{border-left-color:var(--dk-edge)}
body.theme-dark:not(.home-v3) .glance h3{color:var(--dk-teal-txt);letter-spacing:.2em;font-weight:600}
body.theme-dark:not(.home-v3) .glance .chips li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:var(--dk-soft);font-weight:600}
body.theme-dark:not(.home-v3) .glance-act p{color:var(--dk-body)}
@media (max-width:1100px){body.theme-dark:not(.home-v3) .glance-grid>div + div{border-left:0}}

/* ---------------------------------------- cards in rows (offerings, about, blog) ---------------------------------------- */
body.theme-dark:not(.home-v3) .cards .card:hover,body.theme-dark:not(.home-v3) .grid3 .card:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.9);border-color:rgba(82,201,213,.45)}
body.theme-dark:not(.home-v3) .cards .card .washed,body.theme-dark:not(.home-v3) .grid3 .washed{border:0;border-radius:0!important;box-shadow:none!important}
body.theme-dark:not(.home-v3) .grid3 .washed{border:1px solid var(--dk-edge);border-radius:18px!important}
body.theme-dark:not(.home-v3) .cardbody h3{color:var(--dk-text)}
body.theme-dark:not(.home-v3) .apps{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .stepcard p{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .stepcard h3{color:var(--dk-text)}
body.theme-dark:not(.home-v3) .stepnum{background:rgba(4,184,200,.14);color:var(--dk-teal-txt);border:1px solid rgba(82,201,213,.4)}
body.theme-dark:not(.home-v3) .tag{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .tag-outline{background:transparent;border-color:rgba(255,255,255,.3);color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .tag-accent-2{background:rgba(4,184,200,.15);border:1px solid rgba(82,201,213,.45);color:var(--dk-teal-txt)}

/* ---------------------------------------- definition tables, FAQs, video thumbnails ---------------------------------------- */
body.theme-dark:not(.home-v3) .deftable th{color:var(--dk-text)}
body.theme-dark:not(.home-v3) .deftable td{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .deftable th,body.theme-dark:not(.home-v3) .deftable td{border-bottom-color:var(--dk-edge)}
body.theme-dark:not(.home-v3) .ytlite{border:1px solid var(--dk-edge);background:#06101a;box-shadow:0 24px 50px -30px rgba(0,0,0,.9)}
body.theme-dark:not(.home-v3) .ytlite figcaption{background:#06101a;color:var(--dk-soft);font-weight:600}
body.theme-dark:not(.home-v3) .altact{border-top-color:var(--dk-edge)}

/* ---------------------------------------- button variants used on inner pages ---------------------------------------- */
body.theme-dark:not(.home-v3) .btn-sage{background:linear-gradient(135deg,var(--cta-from),var(--cta-to));color:#fff}
body.theme-dark:not(.home-v3) .btn-ink{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff}
body.theme-dark:not(.home-v3) .btn-ink:hover{background:rgba(255,255,255,.14);color:#fff}
body.theme-dark:not(.home-v3) .btn-cream{background:#fff;color:#0c1015}
body.theme-dark:not(.home-v3) .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff}
body.theme-dark:not(.home-v3) .btn-ghost:hover{border-color:var(--dk-teal-txt);color:#fff;background:rgba(255,255,255,.08)}

/* ---------------------------------------- closing call-to-action band on every page ---------------------------------------- */
/* closing card on every inner page (28 Oct 2026): same look as the home page closing band, the orange and cyan silk waves (assets/img/home/cta-waves.svg) along the bottom, glowing teal edge and the faint grid on the left. Was a flat dark card. */
body.theme-dark:not(.home-v3) #main .finalcta{isolation:isolate;background:url("../img/home/cta-waves.svg") left bottom/100% auto 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%);color:#fff;border:1px solid rgba(46,196,212,.55);border-radius:22px;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);grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
body.theme-dark:not(.home-v3) #main .finalcta::before{content:"";position:absolute;inset:0;right:auto;top:auto;width:auto;aspect-ratio:auto;z-index:-1;border-radius:inherit;transform:none;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:not(.home-v3) #main .finalcta::after{display:none}
body.theme-dark:not(.home-v3) #main .finalcta h2{color:#fff}
body.theme-dark:not(.home-v3) #main .finalcta p{color:#d5dce0}
body.theme-dark:not(.home-v3) #main .finalcta-shot .washed{transform:none;border-radius:18px!important;border:1px solid var(--dk-edge2);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)!important}
body.theme-dark:not(.home-v3) #main .finalcta-shot img{aspect-ratio:4/3;object-fit:cover;object-position:center}
body.theme-dark:not(.home-v3) #main .finalcta .btn-ink{background:linear-gradient(135deg,var(--cta-from),var(--cta-to));border:0;color:#fff}
body.theme-dark:not(.home-v3) #main .finalcta .btn-cream{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff}
body.theme-dark:not(.home-v3) #main .finalcta .btn-cream:hover{background:rgba(255,255,255,.1);border-color:var(--dk-teal-txt);color:#fff}
@media (max-width:900px){body.theme-dark:not(.home-v3) #main .finalcta{grid-template-columns:1fr;padding-bottom:clamp(84px,22vw,110px);background-size:auto 230px,auto,auto}}

/* ---------------------------------------- Offerings page (our-services.php) ---------------------------------------- */
body.theme-dark:not(.home-v3) .svc-intro{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .svcbar{background:rgba(255,255,255,.04);border:1px solid var(--dk-edge2);box-shadow:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.theme-dark:not(.home-v3) .svcbar button{color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .svcbar button span{background:rgba(255,255,255,.1);color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .svcbar button:hover{background:rgba(255,255,255,.07);color:#fff}
body.theme-dark:not(.home-v3) .svcbar button.on{background:linear-gradient(135deg,var(--cta-from),var(--cta-to));color:#fff}
body.theme-dark:not(.home-v3) .svcbar button.on span{background:rgba(255,255,255,.22);color:#fff}
body.theme-dark:not(.home-v3) .svc,body.theme-dark:not(.home-v3) .svcpromo{background:var(--dk-grad-card);border:1px solid var(--dk-edge);border-radius:20px;box-shadow:none}
body.theme-dark:not(.home-v3) .svc:hover,body.theme-dark:not(.home-v3) .svcpromo:hover{border-color:rgba(82,201,213,.45);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);transform:translateY(-5px)}
body.theme-dark:not(.home-v3) .svc-img::after{display:none}
body.theme-dark:not(.home-v3) .svc-img::before{background:linear-gradient(180deg,rgba(4,7,11,0) 40%,rgba(4,7,11,.75) 100%)}
body.theme-dark:not(.home-v3) .svc-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:not(.home-v3) .svc:nth-child(odd){--c:#ec5c24}
body.theme-dark:not(.home-v3) .svc:nth-child(even){--c:#04b8c8}
body.theme-dark:not(.home-v3) .svc-body h3{color:#fff}
body.theme-dark:not(.home-v3) .svc-lbl{color:var(--dk-mute)}
body.theme-dark:not(.home-v3) .svc-apps{color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .svc-list li{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .svcpromo-img{background:#eef2f6;border-radius:20px 20px 0 0}

/* ---------------------------------------- About page: team, facts, side-by-side compare ---------------------------------------- */
body.theme-dark:not(.home-v3) .teamcard{background:var(--dk-grad-card);border:1px solid var(--dk-edge);box-shadow:none;border-radius:20px}
body.theme-dark:not(.home-v3) .teamcard:hover{border-color:rgba(82,201,213,.45);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
body.theme-dark:not(.home-v3) .teamcard::before{background:linear-gradient(90deg,var(--dk-orange),var(--dk-teal))}
body.theme-dark:not(.home-v3) .teamcard img{border:2px solid rgba(255,255,255,.2);box-shadow:0 0 0 3px rgba(4,184,200,.3),0 10px 22px rgba(0,0,0,.5)}
body.theme-dark:not(.home-v3) .teamcard h3{color:#fff}
body.theme-dark:not(.home-v3) .teamcard .role{color:var(--dk-teal-txt)}
body.theme-dark:not(.home-v3) .teamcard p{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .teamcard .mail{background:rgba(4,184,200,.14);color:var(--dk-teal-txt);border:1px solid rgba(82,201,213,.4)}
body.theme-dark:not(.home-v3) .teamcard .mail:hover{background:var(--dk-teal);color:#04070b}
body.theme-dark:not(.home-v3) .bigstat b{background:none;-webkit-text-fill-color:currentColor;color:#fff}
body.theme-dark:not(.home-v3) .bigstat span{color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .vscard{background:var(--dk-grad-card)}
body.theme-dark:not(.home-v3) .vsrow .vscard img{background:#eef2f6}
body.theme-dark:not(.home-v3) .vstag{background:rgba(255,255,255,.08);color:var(--dk-soft);border:1px solid rgba(255,255,255,.16)}
body.theme-dark:not(.home-v3) .vstag-on{background:rgba(4,184,200,.15);color:var(--dk-teal-txt);border-color:rgba(82,201,213,.45)}

/* ---------------------------------------- Clients page ---------------------------------------- */
body.theme-dark:not(.home-v3) .clientcard{background:#eef2f6;border:1px solid rgba(255,255,255,.14)}
body.theme-dark:not(.home-v3) .logogrid .clientcard{background:#eef2f6}
body.theme-dark:not(.home-v3) .clientcard:hover{border-color:var(--dk-teal-txt);box-shadow:0 18px 36px -16px rgba(4,184,200,.4)}
body.theme-dark:not(.home-v3) .panel .logos img,body.theme-dark:not(.home-v3) .logos img{background:#eef2f6;border-radius:12px}

/* ---------------------------------------- Blog: post cards, pagination, post page ---------------------------------------- */
body.theme-dark:not(.home-v3) #main .sec:has(> .wrap > .grid3 > .postcard){background:var(--dk-bg)}
body.theme-dark:not(.home-v3) .postcard{background:var(--dk-grad-card)!important;border:1px solid var(--dk-edge)!important;border-radius:20px!important;box-shadow:none!important}
body.theme-dark:not(.home-v3) .postcard:hover{border-color:rgba(82,201,213,.45)!important;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)!important}
body.theme-dark:not(.home-v3) .postcard::before{display:none}
body.theme-dark:not(.home-v3) .postcard::after{background:linear-gradient(90deg,var(--dk-orange),var(--dk-teal))}
body.theme-dark:not(.home-v3) .postcard .mini{background:rgba(4,184,200,.14);color:var(--dk-teal-txt)!important;border:1px solid rgba(82,201,213,.4)}
body.theme-dark:not(.home-v3) .postcard .h3{color:#fff}
body.theme-dark:not(.home-v3) .postcard .apps{color:var(--dk-body)}
body.theme-dark:not(.home-v3) #main .sec .pagination .btn-secondary:hover{background:rgba(255,255,255,.1);color:#fff!important}
body.theme-dark:not(.home-v3) .post-hero{background:linear-gradient(180deg,#071218,#04070b);border-bottom:1px solid var(--dk-edge)}
body.theme-dark:not(.home-v3) .post-hero h1{color:#fff}
body.theme-dark:not(.home-v3) .post-crumbs,body.theme-dark:not(.home-v3) .post-crumbs a,body.theme-dark:not(.home-v3) .post-meta,body.theme-dark:not(.home-v3) .post-meta *{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .post-excerpt{color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .post-body,body.theme-dark:not(.home-v3) .post-body p,body.theme-dark:not(.home-v3) .post-body li{color:var(--dk-body)}
body.theme-dark:not(.home-v3) .post-body h2,body.theme-dark:not(.home-v3) .post-body h3,body.theme-dark:not(.home-v3) .post-body h4,body.theme-dark:not(.home-v3) .post-body strong{color:#fff}
body.theme-dark:not(.home-v3) .post-body a{color:var(--dk-teal-txt)}
body.theme-dark:not(.home-v3) .post-related-card{background:var(--dk-grad-card);border:1px solid var(--dk-edge);border-radius:18px;color:var(--dk-body)}
body.theme-dark:not(.home-v3) .post-related-card *{color:inherit}
body.theme-dark:not(.home-v3) .post-related-card h3,body.theme-dark:not(.home-v3) .post-related-card strong{color:#fff}

/* headings written as <h2 class="h3"> (thank-you, 404) */
body.theme-dark:not(.home-v3) #main .h3,body.theme-dark:not(.home-v3) #main h2.h3{color:var(--dk-text)}
body.theme-dark:not(.home-v3) .steps li{color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .steps li b{background:rgba(4,184,200,.14);color:var(--dk-teal-txt);border:1px solid rgba(82,201,213,.4)}
body.theme-dark:not(.home-v3) #main h2,body.theme-dark:not(.home-v3) .post-related h2{color:var(--dk-text)}

/* ---------------------------------------- leftover tile decorations of the light design ---------------------------------------- */
body.theme-dark:not(.home-v3) #main section.sec h2.h3::before{background:var(--dk-orange);width:22px;height:22px;border-radius:7px}
body.theme-dark:not(.home-v3) main > section:nth-of-type(4n+3),body.theme-dark:not(.home-v3) main > section:nth-of-type(4n){--tc:var(--dk-teal)}
body.theme-dark:not(.home-v3) .aboutsec .card .mini{color:var(--dk-teal-txt)}
body.theme-dark:not(.home-v3) .quotes .stars{color:var(--dk-yellow)}
body.theme-dark:not(.home-v3) .quotes blockquote{background:var(--dk-grad-card);border:1px solid var(--dk-edge);box-shadow:none}
body.theme-dark:not(.home-v3) .quotes blockquote::before{color:var(--dk-teal-txt)}
body.theme-dark:not(.home-v3) .quotes blockquote p{color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .quotes blockquote footer span{color:var(--dk-mute)}
body.theme-dark:not(.home-v3) .quotes blockquote footer b,body.theme-dark:not(.home-v3) .quotes blockquote footer strong{color:#fff}

/* hero form fields: the older "underline field" rule left 2 px of side padding; give the text room */
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .input,
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .cselect-btn{padding:10px 44px 10px 16px}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .field > .input:not(select){padding-right:16px}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .phonefield{border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.08);min-height:50px}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .phonefield .input{border:0;background:none;padding:0 16px 0 14px;min-height:48px}
body.theme-dark:not(.home-v3) .pagehero.banner .formcard .phonefield:focus-within{border-color:#52c9d5;box-shadow:0 0 0 3px rgba(4,184,200,.24)}
/* the same fields in the other forms on inner pages (contact page, closing band) */
body.theme-dark:not(.home-v3) .field .input,body.theme-dark:not(.home-v3) .field .cselect-btn{padding-left:16px}
body.theme-dark:not(.home-v3) .field label{color:var(--dk-soft)}
body.theme-dark:not(.home-v3) .post-nav,body.theme-dark:not(.home-v3) .post-related{border-color:var(--dk-edge)}
body.theme-dark:not(.home-v3) .post-body hr,body.theme-dark:not(.home-v3) .post-nav-links{border-color:var(--dk-edge)}
body.theme-dark:not(.home-v3) .post-feature-img{border-radius:20px;border:1px solid var(--dk-edge);box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
body.theme-dark:not(.home-v3) #main .finalcta .btn-primary{background:linear-gradient(135deg,var(--cta-from) 0%,var(--cta-mid) 55%,var(--cta-to) 100%);color:#fff}
body.theme-dark:not(.home-v3) #main .finalcta .btn-sage{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff}
body.theme-dark:not(.home-v3) #main .finalcta .btn-sage:hover{background:rgba(255,255,255,.1);border-color:var(--dk-teal-txt);color:#fff}

/* ---------------------------------------- Clients page: sector chips, name tiles (27 Oct 2026) ---------------------------------------- */
body.theme-dark:not(.home-v3) .clientsec .sec-eyebrow{margin:0 0 12px}
body.theme-dark:not(.home-v3) .clientnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(34px,4vw,54px)}
body.theme-dark:not(.home-v3) .clientnav a{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px 0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:var(--dk-soft);font-size:14.5px;font-weight:600;text-decoration:none;transition:border-color .2s,background-color .2s,color .2s}
body.theme-dark:not(.home-v3) .clientnav a span{display:grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:rgba(4,184,200,.16);color:var(--dk-teal-txt);font-size:12px;font-weight:700}
body.theme-dark:not(.home-v3) .clientnav a:hover{border-color:var(--dk-teal-txt);background:rgba(4,184,200,.1);color:#fff}
/* filter state (27 Oct 2026): the chosen sector chip is filled, the other sectors are hidden */
body.theme-dark:not(.home-v3) .clientnav a.on{border-color:var(--dk-teal-txt);background:rgba(4,184,200,.22);color:#fff}
body.theme-dark:not(.home-v3) .clientnav a.on span{background:var(--dk-teal-txt);color:#062a30}
body.theme-dark:not(.home-v3) .clientnav a:focus-visible{outline:2px solid var(--dk-teal-txt);outline-offset:3px}
body.theme-dark:not(.home-v3) .clientgroup[hidden]{display:none}
body.theme-dark:not(.home-v3) .clientgroup{padding-top:clamp(8px,1vw,14px);margin-bottom:clamp(40px,5vw,64px);scroll-margin-top:110px}
body.theme-dark:not(.home-v3) .clientgroup:last-child{margin-bottom:0}
body.theme-dark:not(.home-v3) .clientgroup .h3{font-size:clamp(24px,2.2vw,32px);margin-top:0}
body.theme-dark:not(.home-v3) .clientgroup .lede{color:var(--dk-mute)!important}
/* a name tile (no logo on file yet): same size and tile as the logos, the name in dark type */
.clientcard.clientname{display:grid;place-items:center;padding:10px 14px;text-align:center}
.clientcard.clientname span{font-size:14.5px;font-weight:700;line-height:1.25;color:#14222b;text-wrap:balance}
.clientcard.clientname-long{grid-column:span 2}
.clientcard.clientname-long span{font-size:13.5px}
@media (max-width:640px){.clientcard.clientname-long{grid-column:span 1}.clientcard.clientname span{font-size:13.5px}}

/* Dropdown in the hero form (28 Oct 2026): the banner and the form card clip their overflow, which cut the list off. While a dropdown is open they stop clipping, so it drops down over the section below like a normal select. */
body.theme-dark:not(.home-v3) .pagehero:has(.cselect.open){overflow:visible!important;z-index:40}
body.theme-dark:not(.home-v3) .pagehero:has(.cselect.open) .formcard,
body.theme-dark:not(.home-v3) .pagehero:has(.cselect.open) .formwrap{overflow:visible!important}
body.theme-dark:not(.home-v3) .pagehero:has(.cselect.open) .cselect-list{z-index:60}