/* Loaded after app.css. Theme controls work with keyboard and pointer. */
html {
  color-scheme: light;
}
#theme-toogle {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
#theme-toogle > span {
  display: block;
}
#theme-toogle:focus-visible {
  outline: 3px solid #02bb8a;
  outline-offset: 5px;
  border-radius: 20px;
}
#header .switch input:focus-visible + .slide {
  outline: 3px solid #02bb8a;
  outline-offset: 4px;
}
#header .switch .slide {
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
  background: #163d45;
  color: #fff;
}
#header .switch .slide i {
  position: relative;
  font-size: 13px;
}
#header .switch .slide::before {
  background: #08775e;
}
#header .switch input:checked + .slide::before {
  background: #345d66;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --dm-bg: #0b1720;
  --dm-surface: #122630;
  --dm-raised: #193640;
  --dm-border: #41616c;
  --dm-text: #d1e0e5;
  --dm-heading: #f2f8fa;
  --dm-muted: #aec4cc;
  --dm-accent: #70e2bd;
  --dm-hover: #a4f3d8;
  --dm-ink: #08251e;
  --accent-color: #70e2bd;
  --accent-hover: #a4f3d8;
  --popup-background: #122630;
  --popup-text-color: #d1e0e5;
  --popup-button-color: #08251e;
  --popup-button-hover-color: #08251e;
  background: var(--dm-bg);
}
html[data-theme="dark"] body {
  background: var(--dm-bg);
  color: var(--dm-text);
}
/* Legacy content has deeply nested colour selectors; override text explicitly. */
html[data-theme="dark"] body :is(h1, h2, h3, h4, h5, h6, .d-content strong) {
  color: var(--dm-heading) !important;
}
html[data-theme="dark"] body :is(p, .subtitle, .d-ps p) {
  color: var(--dm-text) !important;
}
html[data-theme="dark"] a {
  color: var(--dm-accent);
}
html[data-theme="dark"] a:hover {
  color: var(--dm-hover);
}
html[data-theme="dark"] :focus-visible {
  outline: 3px solid var(--dm-accent);
  outline-offset: 4px;
}
html[data-theme="dark"] ::selection {
  background: #70e2bd;
  color: #08251e;
}

/* Heroes, content, legal pages and submission result pages. */
html[data-theme="dark"]
  :is(
    .homepage,
    .about-page,
    .services-page,
    .service-single-page,
    .terms-page,
    .contact-page,
    .thankyou-page
  )
  :is(.section1, .section2, .section3, .section4, .section5) {
  background: var(--dm-bg);
}
html[data-theme="dark"] :is(.homepage, .about-page) .section1 {
  background: linear-gradient(120deg, #102f35, #09251f);
}
html[data-theme="dark"] :is(.homepage, .about-page) .section1 .bg-tech {
  background: linear-gradient(110deg, rgb(8 28 37 / 94%), rgb(8 44 34 / 90%));
}
html[data-theme="dark"] .homepage .section1::after {
  background: var(--dm-bg);
}
html[data-theme="dark"] .homepage .section2::before {
  background: linear-gradient(transparent, #122c33);
}
html[data-theme="dark"] .service-single-page .section2 {
  background: #102c2c;
}
html[data-theme="dark"] .service-single-page .section2::before {
  background: linear-gradient(var(--dm-bg), transparent);
}
html[data-theme="dark"]
  .services-page
  .section1
  :is(.bg1, .section1-wrapper .container .col2) {
  background: linear-gradient(130deg, #142b37, #124638);
}
html[data-theme="dark"] .contact-page .section1 .section1-wrapper {
  background-color: var(--dm-bg);
}
html[data-theme="dark"] .wave img {
  filter: brightness(0.3) saturate(0.65);
}

html[data-theme="dark"] .services-page .services-list .container .items .item {
  background: #124638;
}

/* Cards and feature lists. */

html[data-theme="dark"]
  .service-single-page
  .section2
  .container
  .items
  .item:nth-child(n) {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .homepage .section2 .container .items .item {
  background: var(--dm-surface);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
html[data-theme="dark"] .homepage .section2 .container .items .item::before {
  background: linear-gradient(180deg, var(--dm-raised), transparent 75%);
  opacity: 1;
  pointer-events: none;
}
html[data-theme="dark"] .homepage .section2 .container .items .item:hover {
  border-color: var(--dm-accent);
  box-shadow: 0 12px 36px rgb(0 0 0 / 30%);
}
html[data-theme="dark"] .about-page .section2 .container .items .item .thumb {
  background: #d8eee6;
  border-color: var(--dm-border);
}
html[data-theme="dark"]
  .service-single-page
  .section2
  .container
  .items
  .item
  .d-content
  .list1
  li {
  background: var(--dm-raised);
  color: var(--dm-text);
}
html[data-theme="dark"]
  .terms-page
  .section1
  .section1-wrapper
  .container
  ul
  li {
  background: linear-gradient(90deg, var(--dm-raised), transparent);
}
html[data-theme="dark"]
  .terms-page
  .section1
  .section1-wrapper
  .container
  section {
  border-color: var(--dm-border);
}
html[data-theme="dark"] .underline {
  border-color: var(--dm-accent);
}
html[data-theme="dark"] .arrow-down {
  border-top-color: var(--dm-surface);
}

/* Navigation and theme switches. */
html[data-theme="dark"] #nav.menu-panel {
  background: var(--dm-surface);
  box-shadow: 0 18px 60px rgb(0 0 0 / 45%);
}
html[data-theme="dark"] #nav.menu-panel .menu-heading {
  color: var(--dm-muted) !important;
}
html[data-theme="dark"] #nav.menu-panel .menu-column + .menu-column {
  border-color: var(--dm-border);
}
html[data-theme="dark"] #nav.menu-panel ul li a {
  color: var(--dm-text);
}
html[data-theme="dark"]
  #nav.menu-panel
  ul
  li
  a:is(:hover, :focus-visible, [aria-current="page"]) {
  background: #214b43;
  color: var(--dm-heading);
}
html[data-theme="dark"] #nav.menu-panel :is(.menu-icon, .menu-arrow) {
  color: var(--dm-accent);
}
html[data-theme="dark"] #nav.menu-panel .nav-opener,
html[data-theme="dark"] .nav-opener {
  background: #214b43;
  color: var(--dm-hover);
}
html[data-theme="dark"] #nav.menu-panel .nav-opener:hover,
html[data-theme="dark"] .nav-opener:hover {
  background: #2a6054;
  color: #fff;
}
html[data-theme="dark"] .colors-captcha-are-you-human label {
  color: #fff;
}
html[data-theme="dark"] .contact-page .myForm {
  background: var(--dm-surface);
  color: var(--dm-text);
}
html[data-theme="dark"] #nav .blobAnim {
  opacity: 0.3;

  @media (max-width: 768px) {
    display: none;
  }
}
/* Use the dark logo on light service/legal headers and the open menu panel. */
html:not([data-theme="dark"])
  :is(.service-single-page, .services-page, .terms-page)
  #header
  .logo
  img,
html:not([data-theme="dark"]) body.navActive #header .logo img {
  content: url("../images/content/logo.png");
}
html[data-theme="dark"] .logo-fallback {
  color: #08251e;
}
html[data-theme="dark"] #theme-toogle .switcher-button-inner-left::after {
  background: #214b43;
}
html[data-theme="dark"] #theme-toogle .switcher-button-inner-left::before {
  color: var(--dm-hover);
}

/* Forms, autofill, validation, focus and disabled states. */
html[data-theme="dark"] .contact-page .myForm {
  background: var(--dm-surface);
  color: var(--dm-text);
  box-shadow: 0 12px 36px rgb(0 0 0 / 25%);
}
html[data-theme="dark"] .contact-page .myForm :is(input, textarea, select) {
  background: #0c1e27;
  color: var(--dm-heading);
  border-color: #72909a;
  caret-color: var(--dm-accent);
}
html[data-theme="dark"]
  .contact-page
  .myForm
  :is(input, textarea)::placeholder {
  color: var(--dm-muted);
  opacity: 1;
}
html[data-theme="dark"] .contact-page .myForm :is(input, textarea):focus {
  border-color: var(--dm-accent);
  outline: 2px solid var(--dm-accent);
  outline-offset: 2px;
}
html[data-theme="dark"] .contact-page .myForm input:autofill {
  box-shadow: inset 0 0 0 100px #0c1e27;
  -webkit-text-fill-color: var(--dm-heading);
}
html[data-theme="dark"] .contact-page .myForm .form-group .help-block {
  background: #602c36;
  color: #ffe0e5;
}
html[data-theme="dark"] .contact-page .myForm .success-box {
  background: #214b43;
  color: #e0fff2;
}
html[data-theme="dark"] .contact-page .myForm button.btn-primary:disabled {
  background: #30424c !important;
  color: #b7c9d0 !important;
  border-color: #72909a !important;
  cursor: not-allowed;
}
/* Existing button declarations use !important: always pair text and fill. */
html[data-theme="dark"] :is(.btn-primary, .btn-main, .modal__btn-primary) {
  background: linear-gradient(110deg, #a4f3d8, #70e2bd) !important;
  color: var(--dm-ink) !important;
}
html[data-theme="dark"]
  :is(.btn-primary, .btn-main, .modal__btn-primary):hover {
  background: #b7f7e0 !important;
  color: var(--dm-ink) !important;
}
html[data-theme="dark"] .btn-line::before {
  background: var(--dm-accent);
}

/* Calls to action, partner strip and footer. */
html[data-theme="dark"] .cta-section {
  background: #102e38;
}
html[data-theme="dark"] .cta-section .bg1::before {
  background: linear-gradient(#102e38, transparent);
}
html[data-theme="dark"] .cta-section::before {
  background: linear-gradient(90deg, #0a202c, rgb(16 62 45 / 70%));
}
html[data-theme="dark"] .logos-marquee-section {
  background: var(--dm-surface);
}
html[data-theme="dark"] .logos-marquee-section .marquee::before {
  background: linear-gradient(90deg, var(--dm-surface), transparent);
}
html[data-theme="dark"] .logos-marquee-section .marquee::after {
  background: linear-gradient(270deg, var(--dm-surface), transparent);
}
html[data-theme="dark"] .logos-marquee-section .marquee-content .logo {
  background: #e5f5ef;
}
html[data-theme="dark"] footer.main-footer {
  background-color: #07131b;
  color: var(--dm-text);
}
html[data-theme="dark"]
  footer.main-footer
  :is(.container1, .creds, .container2 .col1) {
  color: var(--dm-text);
}
html[data-theme="dark"] footer.main-footer :is(.creds, .container2 .col1) a {
  color: var(--dm-accent);
}
html[data-theme="dark"] footer.main-footer a:hover {
  color: var(--dm-hover);
}

/* Consent popups, dialogs and tooltips. */
html[data-theme="dark"] :is(.modal__container, .tippy-box) {
  background: var(--dm-surface);
  color: var(--dm-text);
}
html[data-theme="dark"] :is(.modal__content, .modal__close) {
  color: var(--dm-text);
}
html[data-theme="dark"] .modal__btn:not(.modal__btn-primary) {
  background: var(--dm-raised);
  color: var(--dm-text);
}
html[data-theme="dark"]
  .tippy-box[data-placement^="bottom"]
  > .tippy-arrow::before {
  border-bottom-color: var(--dm-surface);
}
html[data-theme="dark"] .cookie-popup {
  border: 1px solid var(--dm-border);
}
/* The colour challenge keeps its original swatches and images unchanged. */
html[data-theme="dark"] .colors-captcha-are-you-human label {
  color: var(--dm-text);
}
html[data-theme="dark"] .colors-captcha-check-icon {
  border-color: #72909a;
}
html[data-theme="dark"] .colors-captcha-modal,
html[data-theme="dark"] .response-popup-content {
  background: var(--dm-surface);
  color: var(--dm-text);
}
html[data-theme="dark"] .colors-captcha-try-again {
  background: #214b43;
  color: var(--dm-heading);
}
html[data-theme="dark"] .colors-captcha-try-again:hover {
  background: #2a6054;
}
html[data-theme="dark"] .colors-captcha-step:is(.is-done, .is-active) {
  background: var(--dm-accent);
  color: var(--dm-ink);
  border-color: var(--dm-accent);
}
html[data-theme="dark"] .response-popup {
  --theme-popup-text-color: #d1e0e5;
}
@media (prefers-reduced-motion: reduce) {
  #theme-toogle *,
  #theme-toogle *::before,
  #theme-toogle *::after {
    transition: none;
  }
}