/**
 * MANOVA TECH brand colour system
 *
 * Derived from the supplied mark: polished cyan, architectural teal,
 * petrol shadow, cool silver and graphite. This file is intentionally
 * loaded last so legacy component names inherit one coherent palette.
 */
:root {
  /* Core brand scale */
  --brand-cyan-50: #ecfeff;
  --brand-cyan-100: #cffafe;
  --brand-cyan-200: #a5f3f6;
  --brand-cyan-300: #67e8ed;
  --brand-cyan-400: #29d3df;
  --brand-cyan-500: #00afc1;
  --brand-cyan-600: #008da3;
  --brand-cyan-700: #006f82;
  --brand-cyan-800: #075768;
  --brand-cyan-900: #084653;
  --brand-cyan-950: #032c35;

  /* Semantic brand roles */
  --color-primary: var(--brand-cyan-500);
  --color-primary-hover: var(--brand-cyan-400);
  --color-secondary: var(--brand-cyan-700);
  --color-accent: var(--brand-cyan-300);
  --color-cta: #007f93;
  --color-cta-hover: var(--brand-cyan-700);
  --color-background: #05090a;
  --color-surface: #091114;
  --color-surface-raised: #0d181c;
  --color-text: #f7fbfc;
  --color-text-muted: #9babb0;
  --color-border: rgba(103, 232, 237, .14);
  --color-focus: var(--brand-cyan-300);

  /* Compatibility aliases used throughout the existing theme */
  --black: var(--color-background);
  --white: var(--color-text);
  --blue: var(--color-primary);
  --blue-light: var(--brand-cyan-300);
  --blue-bright: var(--brand-cyan-400);
  --purple: var(--brand-cyan-700);
  --cyan: var(--brand-cyan-400);
  --emerald: #00a8a1;
  --rose: #22c7d6;
  --blue-glow: rgba(0, 175, 193, .34);
  --blue-dim: rgba(0, 175, 193, .08);
  --purple-glow: rgba(0, 111, 130, .26);
  --cyan-glow: rgba(41, 211, 223, .22);
  --gray-50: #091114;
  --gray-100: #0d181c;
  --gray-200: #142328;
  --gray-300: #22373d;
  --gray-400: #6f8187;
  --gray-500: #9babb0;
  --gray-600: #d2dcdf;

  /* Section rhythm compatibility */
  --s-charcoal: #070c0e;
  --s-graphite: #0c1518;
  --s-deep: #051217;
  --s-ivory: #f5f8f8;
  --s-stone: #e7eeee;
  --s-beige: #dce9e9;
  --s-mist: #e9f4f5;
  --s-brand-1: #007f93;
  --s-brand-2: #00afc1;
  --s-ink: #071619;
  --s-ink-soft: #52686e;
  --s-accent-onlight: #00788c;
  --s-accent-ondark: #67e8ed;
}

/* Preserve the logo's cool character on all surface variants. */
[data-surface="deep"] {
  --s-soft: #9fb4bb;
  --s-rule: rgba(41, 211, 223, .16);
  --s-panel: rgba(0, 175, 193, .05);
  --s-panel-brd: rgba(41, 211, 223, .15);
  --s-seam: rgba(41, 211, 223, .12);
}

[data-surface="brand-soft"] {
  --s-bg:
    radial-gradient(ellipse 60% 50% at 82% 8%, rgba(0, 175, 193, .15), transparent 62%),
    radial-gradient(ellipse 50% 45% at 8% 96%, rgba(0, 111, 130, .12), transparent 60%),
    #061014;
  --s-fg: #eefcfd;
  --s-soft: #9db6bd;
  --s-rule: rgba(41, 211, 223, .16);
  --s-panel: rgba(41, 211, 223, .055);
  --s-panel-brd: rgba(41, 211, 223, .15);
  --s-seam: rgba(41, 211, 223, .11);
}

[data-surface="mist"] {
  --s-ink: #071619;
  --s-ink-soft: #52686e;
  --s-accent-onlight: #00788c;
  --s-rule: rgba(7, 70, 83, .15);
  --s-seam: rgba(7, 70, 83, .12);
  --s-panel: rgba(0, 111, 130, .045);
  --s-panel-2: #f3f9f9;
  --s-panel-3: #edf6f6;
  --s-panel-brd: rgba(7, 70, 83, .12);
}

[data-surface="brand"] {
  --s-bg: linear-gradient(135deg, #006f82 0%, #007f93 100%);
}

/* White labels require the deeper part of the logo palette (4.7:1+). */
.btn-fill,
.footer-newsletter button,
.sx-big-cta,
.work-filter-btn.active,
.back-top:hover {
  background-color: var(--color-cta);
  color: #fff;
}

.btn-fill .btn-bg,
.nav-cta::before {
  background: linear-gradient(135deg, var(--color-cta), var(--color-cta-hover));
}

.footer-newsletter button:hover,
.sx-button--light:hover {
  background-color: var(--color-cta-hover);
}

/* A visible, consistent keyboard focus treatment on every viewport. */
:where(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--color-focus);
}

/* Native controls and browser UI follow the brand rather than default blue. */
html { accent-color: var(--color-primary); }

/* The navigation remains consistently black instead of transparent on hero sections. */
.nav,
.nav[data-transparent="1"] {
  background: rgba(5, 9, 10, .97);
  border-bottom: 1px solid rgba(103, 232, 237, .09);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.nav.scrolled,
.nav[data-transparent="1"].scrolled {
  background: rgba(3, 7, 8, .98);
  border-bottom-color: rgba(103, 232, 237, .12);
}

/* Premium navbar theme control. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
}

.theme-toggle {
  appearance: none;
  display: inline-grid;
  place-items: center;
  --toggle-inset: 2px;
  --toggle-thumb: 27px;
  --toggle-travel: 29px;
  width: 60px;
  height: 31px;
  padding: var(--toggle-inset);
  border: 0;
  border-radius: 999px;
  background: #050505;
  cursor: pointer;
  contain: layout paint;
  touch-action: manipulation;
  transition: border-color .2s ease, background-color .24s ease, box-shadow .2s ease;
}

.theme-toggle:hover {
  background: #050505;
  box-shadow: none;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--brand-cyan-300);
  outline-offset: 3px;
}

.theme-toggle__track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.theme-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--toggle-thumb);
  height: var(--toggle-thumb);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transform: translate3d(0, -50%, 0);
  will-change: transform;
  transition: transform .34s cubic-bezier(.22,1,.36,1), background-color .2s ease, box-shadow .2s ease;
}

html[data-theme="dark"] .theme-toggle__thumb {
  transform: translate3d(var(--toggle-travel), -50%, 0);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

html[data-theme="light"] .theme-toggle {
  background: #050505;
  border-color: transparent;
}

html[data-theme="dark"] .theme-toggle {
  background: #050505;
  border-color: transparent;
}

html[data-theme] .theme-toggle:hover {
  border-color: transparent;
  background: #050505;
}

/* Explicit dark mode: even sections authored as light surfaces become dark. */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #05090a;
  --color-surface: #091114;
  --color-surface-raised: #0d181c;
  --color-text: #f7fbfc;
  --color-text-muted: #9babb0;
  --color-border: rgba(103, 232, 237, .14);
  --black: var(--color-background);
  --white: var(--color-text);
  --gray-50: #091114;
  --gray-100: #0d181c;
  --gray-200: #142328;
  --gray-300: #22373d;
  --gray-400: #6f8187;
  --gray-500: #9babb0;
  --gray-600: #d2dcdf;
}

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] section:not([data-surface="brand"]),
html[data-theme="dark"] .mobile-menu {
  background-color: var(--color-background);
  color: var(--color-text);
}

html[data-theme="dark"] [data-surface]:not([data-surface="brand"]) {
  --s-bg: #071014;
  --s-fg: #f7fbfc;
  --s-soft: #9babb0;
  --s-rule: rgba(103, 232, 237, .13);
  --s-seam: rgba(103, 232, 237, .09);
  --s-panel: rgba(103, 232, 237, .035);
  --s-panel-2: #0d181c;
  --s-panel-3: #0a1417;
  --s-panel-brd: rgba(103, 232, 237, .13);
  --s-accent: var(--brand-cyan-300);
  --s-ink: #f7fbfc;
  --s-ink-soft: #9babb0;
  --white: #f7fbfc;
  --gray-600: #d2dcdf;
  --gray-500: #9babb0;
  --gray-400: #6f8187;
  --gray-300: #22373d;
  --gray-200: #142328;
  --gray-100: #0d181c;
  color-scheme: dark;
  background: var(--s-bg);
  color: var(--s-fg);
}

html[data-theme="dark"] [data-surface]:not([data-surface="brand"]) :is(h1,h2,h3,h4,h5,h6,.section-title,.page-hero__title,.blog-card-title) {
  color: var(--s-fg);
}

html[data-theme="dark"] [data-surface]:not([data-surface="brand"]) :is(p,li,dd,figcaption,label,.section-sub) {
  color: var(--s-soft);
}

/* Light mode uses cool whites and silver neutrals from the logo. */
html[data-theme="light"] {
  color-scheme: light;
  --color-background: #f5f8f8;
  --color-surface: #ffffff;
  --color-surface-raised: #edf4f4;
  --color-text: #071619;
  --color-text-muted: #52686e;
  --color-border: rgba(7, 70, 83, .14);
  --black: var(--color-background);
  --white: var(--color-text);
  --gray-50: #f8fbfb;
  --gray-100: #edf4f4;
  --gray-200: #dce8e9;
  --gray-300: #c4d4d7;
  --gray-400: #70858a;
  --gray-500: #52686e;
  --gray-600: #263d42;
  --blue-glow: rgba(0, 127, 147, .2);
  --blue-dim: rgba(0, 127, 147, .065);
}

html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] section:not([data-surface="brand"]),
html[data-theme="light"] .mobile-menu {
  background-color: var(--color-background);
  color: var(--color-text);
}

html[data-theme="light"] [data-surface]:not([data-surface="brand"]) {
  --s-bg: #f5f8f8;
  --s-fg: #071619;
  --s-soft: #52686e;
  --s-rule: rgba(7, 70, 83, .14);
  --s-seam: rgba(7, 70, 83, .1);
  --s-panel: rgba(7, 70, 83, .035);
  --s-panel-2: #ffffff;
  --s-panel-3: #edf4f4;
  --s-panel-brd: rgba(7, 70, 83, .12);
  --s-accent: #00788c;
  --s-ink: #071619;
  --s-ink-soft: #52686e;
  --white: #071619;
  --gray-600: #263d42;
  --gray-500: #52686e;
  --gray-400: #70858a;
  --gray-300: #c4d4d7;
  --gray-200: #dce8e9;
  --gray-100: #edf4f4;
  color-scheme: light;
  background: var(--s-bg);
  color: var(--s-fg);
}

html[data-theme="light"] [data-surface="stone"],
html[data-theme="light"] [data-surface="graphite"] { --s-bg: #edf4f4; }
html[data-theme="light"] [data-surface="mist"],
html[data-theme="light"] [data-surface="brand-soft"] { --s-bg: #e8f3f4; }
html[data-theme="light"] [data-surface="ivory"],
html[data-theme="light"] [data-surface="charcoal"] { --s-bg: #f8fbfb; }

html[data-theme="light"] [data-surface]:not([data-surface="brand"]) :is(h1,h2,h3,h4,h5,h6,.section-title,.page-hero__title,.blog-card-title) {
  color: var(--s-fg);
}

html[data-theme="light"] [data-surface]:not([data-surface="brand"]) :is(p,li,dd,figcaption,label,.section-sub) {
  color: var(--s-soft);
}

html[data-theme="light"] :is([class*="-card"],[class*="__card"],[class*="-panel"],[class*="__panel"],.faq-item,.field input,.field textarea) {
  border-color: var(--color-border);
}

html[data-theme="light"] :is(.field input,.field textarea,input,textarea,select) {
  background-color: rgba(255, 255, 255, .72);
  border-color: var(--color-border);
  color: var(--color-text);
}

html[data-theme="light"] ::placeholder { color: #70858a; opacity: 1; }

/* Navbar stays black as requested; its menus follow the active theme. */
html[data-theme="light"] .nav :is(.nav-trigger,.nav-cta) { color: #f7fbfc; }
html[data-theme="light"] .nav .hamburger i { background: #f7fbfc; }

html[data-theme="light"] .nav-panel {
  background: rgba(248, 251, 251, .985);
  border-color: rgba(7, 70, 83, .14);
  color: #071619;
  box-shadow: 0 24px 70px rgba(3, 44, 53, .16);
}

html[data-theme="light"] .nav-panel :is(h2,h3,h4,strong,b,.nav-col-link,.mega-panel-cta) { color: #071619; }
html[data-theme="light"] .nav-panel :is(p,small,.nav-panel-kicker,.nav-resource-meta) { color: #52686e; }
html[data-theme="light"] .mobile-menu { border-color: rgba(7, 70, 83, .12); }
html[data-theme="light"] .mobile-menu :is(a,button,strong) { color: #071619; }

html[data-theme="light"] .loader {
  --white: #f7fbfc;
  --gray-500: #9babb0;
  --gray-300: #22373d;
  background: #05090a;
  color: #f7fbfc;
}

/* A dark footer remains the deliberate high-contrast anchor in light mode. */
html[data-theme="light"] body > footer {
  --white: #f7fbfc;
  --gray-600: #d2dcdf;
  --gray-500: #9babb0;
  --gray-400: #7f9298;
  background: #05090a;
  color: #f7fbfc;
  border-top-color: rgba(103, 232, 237, .1);
}

html.theme-transitioning body,
html.theme-transitioning .nav-panel,
html.theme-transitioning .mobile-menu,
html.theme-transitioning :is(input,textarea,select) {
  transition: background-color .34s ease, border-color .34s ease, color .26s ease, box-shadow .34s ease;
}

/* Transparent image logo lockups replace the former text-only wordmarks. */
.brand-logo-img {
  display: block;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.nav-logo--image {
  --nav-logo-width: clamp(7.25rem, 9.5vw, 8.75rem);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: var(--nav-logo-width);
  height: auto;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.nav-logo-transition {
  display: block;
  width: 100%;
  overflow: hidden;
  contain: paint;
  clip-path: inset(0 47% 0 0);
  will-change: clip-path;
  transition: clip-path .38s cubic-bezier(.22,1,.36,1);
}

.brand-logo-img--nav {
  width: var(--nav-logo-width);
  max-width: none;
  height: auto;
}

@media (hover:hover) and (pointer:fine) and (min-width:1081px) {
  .nav-logo--image:is(:hover,:focus-visible) .nav-logo-transition {
    clip-path: inset(0 0 0 0);
  }
}

.loader-logo[data-image-logo="1"] {
  width: min(32rem, 78vw);
  overflow: visible;
  clip-path:inset(0 0 0 0);
  transform:translate3d(0,0,0);
  will-change:clip-path,transform,opacity;
  transition:clip-path .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1),opacity .62s cubic-bezier(.16,1,.3,1);
}

.brand-logo-img--loader {
  width: 100%;
  height: auto;
  opacity:1;
  transform:none;
  animation:none;
}

.loader-logo[data-image-logo="1"].is-condensing {
  clip-path:inset(0 47% 0 0);
  transform:translate3d(23.5%,0,0);
}

.footer-brand .nav-logo--footer {
  width: min(15rem, 100%);
  height: auto;
  margin-bottom: 1.25rem;
}

.brand-logo-img--footer {
  width: 100%;
  height: auto;
}

.brand-mark-crop {
  display: block;
  width: 74px;
  height: 74px;
  overflow: hidden;
}

.brand-mark-crop img {
  display: block;
  width: auto;
  max-width: none;
  height: 74px;
}

.footer-marquee-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: clamp(4.5rem, 8vw, 7rem);
}

.footer-marquee-logo img {
  display: block;
  width: auto;
  height: 100%;
}

@media (max-width: 900px) {
  .nav-logo--image { --nav-logo-width:7rem; width:var(--nav-logo-width); height:auto; }
}

@media (max-width: 560px) {
  .nav-logo--image { --nav-logo-width:6.25rem; width:var(--nav-logo-width); height:auto; }
  .loader-logo[data-image-logo="1"] { width: min(27rem, 88vw); }
  .footer-marquee-logo { height: 3.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo-img--loader { opacity: 1; transform: none; animation: none; }
  .loader-logo[data-image-logo="1"] { clip-path:none;transform:none;transition:none; }
  .nav-logo-transition { transition-duration:.01ms; }
  .theme-toggle,
  .theme-toggle__thumb { transition-duration: .01ms; }
}

/* Service pages previously assigned unrelated colours by category. */
[class*="service-hero--"] {
  --svc-accent-start: var(--brand-cyan-500);
  --svc-accent-end: var(--brand-cyan-300);
}

/* Keep selection readable on the bright logo cyan. */
::selection {
  background: var(--brand-cyan-500);
  color: #021113;
}

/* Light-surface CTAs need the darker teal for WCAG-sized white text. */
:is([data-surface="ivory"], [data-surface="stone"], [data-surface="beige"], [data-surface="mist"]) .btn-fill,
:is([data-surface="ivory"], [data-surface="stone"], [data-surface="beige"], [data-surface="mist"]) button[type="submit"] {
  background-color: var(--brand-cyan-700);
  color: #fff;
}

@media (forced-colors: active) {
  :where(a, button, input, textarea, select, summary):focus-visible {
    outline: 2px solid CanvasText;
  }
}