/* Digital Supply Chain, light mode only: a warm, quiet "premium" background.
   - Particle wave (wave-bg.js): the AIoT hero film recoloured to bronze, orange and gold, the navy made transparent.
   - Aurora: three soft warm glows (sand, champagne, peach) drifting behind all content.
   - Horizon glint: a champagne highlight sweeps along the rim of the curved "planet" behind Contact every 9 s.
   - Section glows that were coloured navy for dark mode turn into soft white light here.
   No blue or navy. Nothing moves for visitors who ask their device to reduce motion. Dark mode is untouched. */

/* ---------- particle wave canvas: fixed above the page backdrop (z-index 0), behind the content (z-index 10) ---------- */
.wave-bg { display: none; }
:root[data-theme="light"] .wave-bg { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }
/* the wave spans the whole screen: soften it towards the left, where headings and text start */
@media (min-width: 1024px) {
  :root[data-theme="light"] .wave-bg {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .5) 30%, #000 62%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .5) 30%, #000 62%);
  }
}
/* phones and tablets: text runs the full width, so the wave stays faint */
@media (max-width: 1023px) { :root[data-theme="light"] .wave-bg { opacity: .6; } }

/* ---------- section glows: navy in light mode looked like a grey smudge ---------- */
:root[data-theme="light"] .glow[style*="1c305c"] {
  background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)) !important;
}

/* ---------- horizon: warm the rim (it was blue-grey) ---------- */
:root[data-theme="light"] .planet {
  background: radial-gradient(closest-side, #fdfcf9 96.5%, #f3ede2 99.1%, #dfd0b8 99.75%, rgba(120, 96, 60, .12)) !important;
}

/* ambient: runs for everyone; for reduced motion at 40% speed (below) */
@media all {
  /* ---------- aurora: three pseudo-elements, fixed above the page backdrop and behind the content ---------- */
  :root[data-theme="light"] body::before,
  :root[data-theme="light"] body::after,
  :root[data-theme="light"] #root::before {
    content: ""; position: fixed; z-index: 1; pointer-events: none; border-radius: 50%; will-change: transform;
  }
  :root[data-theme="light"] body::before {                 /* sand, top left */
    width: 60vmax; height: 60vmax; left: -14vmax; top: -18vmax;
    background: radial-gradient(closest-side, rgba(214, 186, 140, .42), rgba(214, 186, 140, 0));
    animation: lux-drift-a 22s ease-in-out infinite alternate;
  }
  :root[data-theme="light"] body::after {                  /* champagne, top right */
    width: 56vmax; height: 56vmax; right: -16vmax; top: -10vmax;
    background: radial-gradient(closest-side, rgba(232, 206, 164, .46), rgba(232, 206, 164, 0));
    animation: lux-drift-b 27s ease-in-out infinite alternate;
  }
  :root[data-theme="light"] #root::before {                /* soft peach, low centre */
    width: 50vmax; height: 50vmax; left: 18vw; bottom: -26vmax;
    background: radial-gradient(closest-side, rgba(238, 178, 136, .30), rgba(238, 178, 136, 0));
    animation: lux-drift-c 31s ease-in-out infinite alternate;
  }
  @keyframes lux-drift-a { to { transform: translate3d(34vw, 30vh, 0) scale(1.2); } }
  @keyframes lux-drift-b { to { transform: translate3d(-38vw, 34vh, 0) scale(.85); } }
  @keyframes lux-drift-c { to { transform: translate3d(26vw, -42vh, 0) scale(1.25); } }

  /* ---------- horizon glint: a thin ring on the planet's rim, lit in one short arc that sweeps across ---------- */
  :root[data-theme="light"] .planet::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(from 0deg, rgba(200, 168, 112, 0) 0deg, rgba(200, 168, 112, 0) 328deg,
      rgba(200, 168, 112, .55) 348deg, rgba(255, 255, 255, .98) 355deg, rgba(222, 160, 110, .45) 358deg, rgba(200, 168, 112, 0) 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent 98.9%, #000 99.45%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 98.9%, #000 99.45%, transparent 100%);
    animation: lux-glint 9s cubic-bezier(.45, 0, .25, 1) infinite;
  }
  @keyframes lux-glint {
    0% { transform: rotate(-34deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: rotate(30deg); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="light"] body::before { animation-duration: 55s !important; animation-iteration-count: infinite !important; }
  :root[data-theme="light"] body::after { animation-duration: 68s !important; animation-iteration-count: infinite !important; }
  :root[data-theme="light"] #root::before { animation-duration: 78s !important; animation-iteration-count: infinite !important; }
  :root[data-theme="light"] .planet::after { animation-duration: 22s !important; animation-iteration-count: infinite !important; }
}

/* ---------- frosted glass: every block of text sits on a warm glass sheet, never straight on the wave ----------
   The sheet is each section's content container (the hero copy, each section's grid, the "next pages" list).
   Cards that are already solid (Contact, stat tiles, case study, service cards) sit on top of it unchanged. */
:root[data-theme="light"] :is(
  header#top.vh > .mx-auto,
  #main > section > .mx-auto,
  #main > section > .beat > .mx-auto,
  #main > nav > .mx-auto
):not(:has(> .k-cta)) {
  background: linear-gradient(160deg, rgba(255, 253, 250, .74), rgba(250, 245, 238, .56));
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 28px;
  box-shadow: 0 30px 80px -48px rgba(80, 52, 24, .38), inset 0 1px 0 rgba(255, 255, 255, .9);
  padding: clamp(18px, 3.4svh, 38px) clamp(20px, 2.8vw, 44px);
}
/* home hero: the film stays solid, with no white wash and no box over it. As in dark mode, the copy is white, straight on
   the film; a soft dark tint low on the left (only under the copy) keeps it readable. */
:root[data-theme="light"] header#top:not(.vh) :is(.hero-wash-a, .hero-wash-b, .hero-wash-c) { display: none; }
:root[data-theme="light"] header#top:not(.vh) > div:first-child::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(62% 70% at 14% 86%, rgba(10, 14, 24, .58), rgba(10, 14, 24, .22) 55%, rgba(10, 14, 24, 0) 78%),
              linear-gradient(to top, rgba(10, 14, 24, .38), rgba(10, 14, 24, 0) 34%);
}
:root[data-theme="light"] header#top:not(.vh) > .mx-auto,
:root[data-theme="light"] header#top:not(.vh) > .mx-auto :is(h1, p, span, div, a) {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 30px rgba(0, 0, 0, .32);
}
:root[data-theme="light"] header#top:not(.vh) > .mx-auto * { border-color: rgba(255, 255, 255, .55); }
@media (max-width: 1023px) {
  :root[data-theme="light"] header#top:not(.vh) > div:first-child::after {
    background: linear-gradient(to top, rgba(10, 14, 24, .62), rgba(10, 14, 24, .2) 55%, rgba(10, 14, 24, 0) 80%);
  }
}
/* hero: the sheet hugs the copy, so the hero's own artwork on the right stays open */
:root[data-theme="light"] header#top.vh > .mx-auto { width: fit-content; max-width: min(100%, 1120px); margin-inline: 0 auto; }
/* partners: the sheet hugs the heading; the logo cards below get their own frosted fill */
:root[data-theme="light"] #partners > .mx-auto { width: fit-content; }
/* partner logo cards: solid white (nothing shows through) and every logo in its own brand colours */
:root[data-theme="light"] .pw-card {
  background: #fff; opacity: 1;
  border-color: rgba(13, 27, 46, .07);
  box-shadow: 0 16px 34px -22px rgba(60, 40, 20, .35), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
:root[data-theme="light"] .pw-logo { filter: none; opacity: 1; }
/* dark mode: the cards are opaque too; logos stay white there (several brand wordmarks are black) */
:root[data-theme="dark"] .pw-card { background: linear-gradient(#15264d, #0f1d3e); opacity: 1; }
/* the "next pages" strip: the sheet sits inside the section's own top spacing */
:root[data-theme="light"] #main > nav > .mx-auto .vl { border-top-color: transparent; }
/* no backdrop-filter support: a plain off-white sheet instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"] :is(header#top.vh > .mx-auto, #main > section > .mx-auto, #main > section > .beat > .mx-auto, #main > nav > .mx-auto):not(:has(> .k-cta)) {
    background: rgba(253, 250, 246, .95);
  }
}
@media (max-width: 767px) {
  :root[data-theme="light"] :is(header#top.vh > .mx-auto, #main > section > .mx-auto, #main > section > .beat > .mx-auto, #main > nav > .mx-auto):not(:has(> .k-cta)) {
    border-radius: 20px; padding: 18px 16px;
  }
}
/* short laptop screens: a slimmer sheet, so sections are not scaled down to fit */
@media (min-width: 1024px) and (max-height: 760px) {
  :root[data-theme="light"] :is(header#top.vh > .mx-auto, #main > section > .mx-auto, #main > section > .beat > .mx-auto, #main > nav > .mx-auto):not(:has(> .k-cta)) {
    padding: 12px 24px; border-radius: 22px;
  }
  :root[data-theme="light"] #partners > .mx-auto { padding-block: 4px 10px; }
  :root[data-theme="light"] #partners .pw-rows { margin-top: clamp(18px, 4svh, 48px); }
}

/* The site is dark only (the blue theme): the light/dark toggle is hidden on every page. */
.theme-btn { display: none !important; }
/* Partner cards: one solid white card each (as in the old light version), every logo in its own brand colours */
:root[data-theme="dark"] .pw-card { background: #fff; border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .pw-card:hover { border-color: #fff; box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .8); }
:root .pw-logo, :root[data-theme="dark"] .pw-logo { filter: none; opacity: 1; }
:root[data-theme="dark"] .pw-name { color: #4a5872; }
:root[data-theme="dark"] .pw-type { color: #0d1b2e; }