/* =====================================================================
   SWI Digital: site layer.
   Only what Elementor cannot hold lives here: fonts, the page scale,
   and behaviour tied to scroll/state (3D stage, ember canvases, fixed
   header, mobile menu, video layer, marquee, news slider, animations).
   Everything visual (type, colours, spacing, layout) is set in Elementor
   through global variables and classes.

   Hook classes start with "js-". They are Elementor global classes; keep
   their names, they are what this file and swi-runtime.js look for.
   ===================================================================== */

/* ---------- Fonts --------------------------------------------------- */
@font-face {
  font-family: "TT Hoves Pro";
  src: url("../fonts/tt-hoves-pro-variable.woff2") format("woff2");
  font-weight: 50 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Scale ---------------------------------------------------
   1 design pixel = 0.1rem. On desktop the 1440 layout scales with the
   window and stops growing at 1920px; tablet and phone use 10px. */
html {
  font-size: calc(min(100vw, 1920px) / 144);
  /* TT Hoves has a slant axis; iOS Safari can leave it engaged. */
  font-variation-settings: "slnt" 0;
}

@media (max-width: 1024px) {
  html {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--white, #fff);
  color: var(--black, #000);
  font-family: var(--font-display, "TT Hoves Pro"), sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}

body a {
  text-decoration: none;
}

/* Keyboard focus: a clear ring, only when navigating by keyboard. */
body :focus-visible {
  outline: 0.2rem solid currentColor;
  outline-offset: 0.3rem;
}

body .js-news-card:focus-visible {
  outline-offset: -0.2rem;
}

/* Skip link from the theme, visible when focused. */
.skip-link.screen-reader-text:focus {
  position: fixed !important;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: 1.2rem 1.6rem;
  background: var(--white, #fff);
  color: var(--black, #000);
  font-size: 1.6rem;
}

/* ---------- Layers ---------------------------------------------------
   The 3D stage sits at z 0, the video layer at z 1 above it, and every
   section at z 1 after it in the DOM, so sections paint over both. */
.js-scene-zone ~ *,
.elementor-location-footer {
  position: relative;
  z-index: 1;
}

/* ---------- Header: fixed, hides on scroll down, returns on scroll up */
.elementor-location-header {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  right: 0;
  left: 0;
  z-index: 50;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.35s ease;
}

html.swi-hdr-solid .elementor-location-header {
  background-color: var(--swi-header-bg, rgba(0, 0, 0, 0.9));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html.swi-hdr-hidden .elementor-location-header {
  transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
}

/* A fixed menu panel needs an ancestor without transform/filter. */
html.swi-nav-open .elementor-location-header {
  transform: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.elementor-editor-active .elementor-location-header {
  position: relative;
  top: 0;
  background-color: #000;
}

/* ---------- Mobile menu ---------------------------------------------- */
.js-nav-toggle {
  display: none !important;
}

.js-nav-toggle span {
  display: block;
  width: 2.2rem;
  height: 0.15rem;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 1024px) {
  .js-nav-toggle {
    position: relative;
    z-index: 60;
    display: flex !important;
  }

  .js-nav-panel {
    position: fixed !important;
    inset: 0;
    z-index: 55;
    display: none !important;
    overflow-y: auto;
  }

  .js-nav-panel.is-open {
    display: flex !important;
  }

  html.swi-nav-open,
  html.swi-nav-open body {
    overflow: hidden;
  }

  /* The logo stays visible above the open menu. */
  html.swi-nav-open .js-site-header .js-logo {
    position: relative;
    z-index: 60;
  }

  html.swi-nav-open .js-nav-toggle span:nth-child(1) {
    transform: translateY(0.7rem) rotate(45deg);
  }

  html.swi-nav-open .js-nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  html.swi-nav-open .js-nav-toggle span:nth-child(3) {
    transform: translateY(-0.7rem) rotate(-45deg);
  }

  /* In the editor the panel stays in the flow so it can be edited. */
  body.elementor-editor-active .js-nav-panel {
    position: static !important;
    display: flex !important;
  }
}

/* ---------- Logo mark ------------------------------------------------ */
.js-logo-mark {
  container-type: inline-size;
  overflow: hidden;
  border-radius: 50%;
}

.js-logo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  /* The bar keyframes move in em: 1em = mark width / 37.44. */
  font-size: calc(100cqw / 37.443);
}

/* ---------- 3D scene zone ------------------------------------------- */
.js-scene-zone {
  position: relative;
}

.js-scene-zone > :not(.swi-scene__stage) {
  position: relative;
  z-index: 1;
}

.swi-scene__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.swi-scene__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.swi-scene__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.js-scene-zone.is-fallback .swi-scene__sticky {
  background: #000 var(--swi-scene-fallback) center / cover no-repeat;
}

.swi-scene__labels {
  position: absolute;
  inset: 0;
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.map-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.6rem 0 0;
  border-top: 0.1rem solid #fff;
  font-size: 1.1rem;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 0.4s;
}

.map-label b {
  display: block;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.map-label span {
  display: block;
  opacity: 0.6;
}

body.elementor-editor-active .js-scene-zone {
  background-image: var(--swi-scene-fallback);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

/* "What we do" items: the text dims to ink when the item turns white. */
.js-scene-item p {
  transition: color 0.35s ease;
}

.js-scene-item:hover p,
.js-scene-item:focus-within p {
  color: var(--ink) !important;
}

/* ---------- Video layer ----------------------------------------------
   The video set in the group section plays fixed behind the power and
   group screens (swi-runtime.js moves it). */
body:not(.elementor-editor-active) .js-bg-video {
  display: none !important;
}

body.elementor-editor-active .js-bg-video {
  position: absolute !important;
  right: 2rem;
  bottom: 2rem;
  z-index: 5;
  width: 24rem !important;
  outline: 0.1rem dashed rgba(255, 255, 255, 0.6);
}

.swi-video-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.4s ease;
}

.swi-video-layer.is-on {
  opacity: 1;
}

/* Rules and copy that sit over the video turn light while it shows. */
.js-flip-rules {
  transition: border-color 0.5s ease;
}

.js-flip-text {
  transition: color 0.5s ease;
}

.js-flip-btn {
  transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

html.swi-video-on .js-flip-rules {
  border-color: var(--rule-light) !important;
}

html.swi-video-on .js-flip-text {
  color: var(--white) !important;
}

html.swi-video-on .js-flip-btn {
  background-color: var(--white) !important;
  color: var(--black) !important;
}

/* ---------- Ember canvases (CTA and footer) --------------------------- */
.js-ember-cta,
.js-ember-footer {
  position: relative;
  overflow: hidden;
}

.swi-ember__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
}

.swi-ember--footer .swi-ember__canvas {
  top: auto;
  bottom: 0;
  height: 76.4rem;
}

.swi-ember__fade {
  position: absolute;
  right: 0;
  bottom: 3.6rem;
  left: 0;
  z-index: 1;
  height: 34.6rem;
  background: linear-gradient(to bottom, #000 18%, rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
}

.swi-ember > :not(.swi-ember__canvas):not(.swi-ember__fade) {
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .swi-ember--footer .swi-ember__canvas {
    height: 36rem;
  }

  .swi-ember__fade {
    bottom: 0;
    height: 14rem;
  }
}

/* ---------- Partner logos marquee -------------------------------------
   Logos keep a fixed row height and never shrink or get clipped; the
   runtime sets the shift (one set width) and the loop duration. */
.js-marquee {
  overflow: hidden;
  flex-shrink: 0;
}

.js-marquee .partner-logo {
  flex: 0 0 auto;
}

.swi-marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: max-content;
}

.swi-marquee__track.is-ready {
  animation: swi-marquee var(--swi-marquee-duration, 32s) linear infinite;
}

.js-marquee:hover .swi-marquee__track,
.js-marquee:focus-within .swi-marquee__track {
  animation-play-state: paused;
}

.swi-marquee__set {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2.4rem;
  padding-right: 2.4rem;
}

@keyframes swi-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--swi-marquee-shift, 50%)), 0, 0);
  }
}

/* ---------- News -----------------------------------------------------
   Desktop: three cards in a row, one wide and two narrow. The arrows move
   the wide slot left → centre → right; only the wide card shows its date
   and title. Mobile: every card full, swiped sideways. */
.js-news-card {
  min-width: 0;
  color: inherit;
}

.js-news-card img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js-news-card:hover img,
.js-news-card:focus-visible img {
  transform: scale(1.03);
}

@media (min-width: 1025px) {
  .js-news {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 2rem !important;
  }

  .js-news > .js-news-card {
    flex: 1 1 0 !important;
    width: auto !important;
    overflow: hidden;
    transition: flex-grow 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* Wide : narrow = 92.4rem : 17.7rem, as in the design. Before the script
     runs the first card is the wide one. */
  .js-news > .js-news-card.is-wide,
  .js-news:not(.is-ready) > .js-news-card:first-child {
    flex-grow: 5.22 !important;
  }

  .js-news > .js-news-card:nth-child(n + 4) {
    display: none !important;
  }

  /* The caption keeps the wide width so the row height never jumps. */
  /* Hidden by opacity only, so screen readers still read every title. */
  .js-news .js-news-meta {
    width: 92.4rem !important;
    max-width: none !important;
    padding-right: 13rem !important;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .js-news > .js-news-card.is-wide .js-news-meta,
  .js-news:not(.is-ready) > .js-news-card:first-child .js-news-meta {
    opacity: 1;
    transition: opacity 0.5s ease 0.35s;
  }

  .js-news > .js-news-nav {
    position: absolute !important;
    right: 0;
    bottom: 0;
    z-index: 2;
  }

  .js-news-prev[aria-disabled="true"],
  .js-news-next[aria-disabled="true"] {
    opacity: 0.25;
    pointer-events: none;
  }
}

@media (max-width: 1024px) {
  .js-news {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Snap to the list's own side padding, not to the screen edge. */
    scroll-padding-inline: 2rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .js-news::-webkit-scrollbar {
    display: none;
  }

  .js-news > .js-news-card {
    flex: 0 0 min(84%, 48rem);
    scroll-snap-align: start;
  }

  .js-news > .js-news-nav {
    display: none !important;
  }
}

/* ---------- Stakeholder icons ---------------------------------------- */
.js-stake-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.js-stake-icon .sq {
  fill-opacity: 0.35;
  animation: swi-shade 1.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.2s - 0.35s);
}

@keyframes swi-shade {
  0%,
  100% {
    fill-opacity: 0.32;
  }
  18%,
  34% {
    fill-opacity: 1;
  }
}

/* ---------- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .swi-marquee__track,
  .js-stake-icon .sq,
  .js-logo.is-animating .bar {
    animation: none !important;
  }

  .js-stake-icon .sq {
    fill-opacity: 1;
  }

  .js-news > .js-news-card,
  .js-news .js-news-meta {
    transition: none !important;
  }

  .elementor-location-header,
  .swi-video-layer {
    transition: none;
  }
}

/* ---------- Logo animation (hover): bars slide out and back ---------- */
.js-logo.is-animating .bar {
  animation-duration: 2s, 3.8s;
  animation-timing-function: linear, linear;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: forwards, forwards;
}

.js-logo.is-animating .bar-t02 { animation-name: o-t02, x-t02; }
.js-logo.is-animating .bar-t04 { animation-name: o-t04, x-t04; }
.js-logo.is-animating .bar-t06 { animation-name: o-t06, x-t06; }
.js-logo.is-animating .bar-t08 { animation-name: o-t08, x-t08; }
.js-logo.is-animating .bar-t10 { animation-name: o-t10, x-t10; }
.js-logo.is-animating .bar-e09 { animation-name: o-e09, x-e09; }
.js-logo.is-animating .bar-e07 { animation-name: o-e07, x-e07; }
.js-logo.is-animating .bar-e05 { animation-name: o-e05, x-e05; }
.js-logo.is-animating .bar-e03 { animation-name: o-e03, x-e03; }
.js-logo.is-animating .bar-e01 { animation-name: o-e01, x-e01; }
.js-logo.is-animating .bar-n1 { animation-name: o-n1, x-n1; }
.js-logo.is-animating .bar-n2 { animation-name: o-n2, x-n2; }
.js-logo.is-animating .bar-n3 { animation-name: o-n3, x-n3; }
.js-logo.is-animating .bar-n4 { animation-name: o-n4, x-n4; }
.js-logo.is-animating .bar-n5 { animation-name: o-n5, x-n5; }

@keyframes o-t02 { 0%, 44.5% { opacity: 1 } 51.5%, 79% { opacity: 0 } 100% { opacity: 1 } }
@keyframes x-t02 {
  0%, 13.421% { translate: 0 0 } 23.421% { translate: 7.563em 0 } 27.105% { translate: 9.696em 0 }
  28.026% { translate: -35.517em 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) }
  43.289%, 100% { translate: 0 0 }
}
@keyframes o-t04 { 0%, 49.5% { opacity: 1 } 56.5%, 80.75% { opacity: 0 } 100% { opacity: 1 } }
@keyframes x-t04 {
  0%, 16.053% { translate: 0 0 } 26.053% { translate: 4.596em 0 } 29.737% { translate: 5.892em 0 }
  30.658% { translate: -38.112em 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) }
  45.921%, 100% { translate: 0 0 }
}
@keyframes o-t06 { 0%, 54.5% { opacity: 1 } 61.5%, 82.5% { opacity: 0 } 100% { opacity: 1 } }
@keyframes x-t06 {
  0%, 18.684% { translate: 0 0 } 28.684% { translate: 3.617em 0 } 32.368% { translate: 4.637em 0 }
  33.289% { translate: -38.669em 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) }
  48.553%, 100% { translate: 0 0 }
}
@keyframes o-t08 { 0%, 59.5% { opacity: 1 } 66.5%, 84.25% { opacity: 0 } 100% { opacity: 1 } }
@keyframes x-t08 {
  0%, 21.316% { translate: 0 0 } 31.316% { translate: 4.599em 0 } 35% { translate: 5.896em 0 }
  35.921% { translate: -38.112em 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) }
  51.184%, 100% { translate: 0 0 }
}
@keyframes o-t10 { 0%, 64.5% { opacity: 1 } 71.5%, 86% { opacity: 0 } 100% { opacity: 1 } }
@keyframes x-t10 {
  0%, 23.947% { translate: 0 0 } 33.947% { translate: 7.569em 0 } 37.632% { translate: 9.704em 0 }
  38.553% { translate: -35.517em 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) }
  53.816%, 100% { translate: 0 0 }
}
@keyframes o-e09 { 0%, 62% { opacity: 1 } 69%, 70.75% { opacity: 0 } 78.75%, 100% { opacity: 1 } }
@keyframes x-e09 {
  0%, 22.632% { translate: 0 0 } 32.632% { translate: 28.138em 0 } 36.316% { translate: 36.075em 0 }
  37.237% { translate: -14.931em 0 } 41.447% { translate: -10.751em 0 } 52.5%, 100% { translate: 0 0 }
}
@keyframes o-e07 { 0%, 57% { opacity: 1 } 64%, 65.75% { opacity: 0 } 73.75%, 100% { opacity: 1 } }
@keyframes x-e07 {
  0%, 20% { translate: 0 0 } 30% { translate: 30.162em 0 } 33.684% { translate: 38.669em 0 }
  34.605% { translate: -11.123em 0 } 38.816% { translate: -8.009em 0 } 49.868%, 100% { translate: 0 0 }
}
@keyframes o-e05 { 0%, 52% { opacity: 1 } 59%, 60.75% { opacity: 0 } 68.75%, 100% { opacity: 1 } }
@keyframes x-e05 {
  0%, 17.368% { translate: 0 0 } 27.368% { translate: 30.118em 0 } 31.053% { translate: 38.613em 0 }
  31.974% { translate: -10.477em 0 } 36.184% { translate: -7.543em 0 } 47.237%, 100% { translate: 0 0 }
}
@keyframes o-e03 { 0%, 47% { opacity: 1 } 54%, 55.75% { opacity: 0 } 63.75%, 100% { opacity: 1 } }
@keyframes x-e03 {
  0%, 14.737% { translate: 0 0 } 24.737% { translate: 30.162em 0 } 28.421% { translate: 38.669em 0 }
  29.342% { translate: -11.119em 0 } 33.553% { translate: -8.006em 0 } 44.605%, 100% { translate: 0 0 }
}
@keyframes o-e01 { 0%, 42% { opacity: 1 } 49%, 50.75% { opacity: 0 } 58.75%, 100% { opacity: 1 } }
@keyframes x-e01 {
  0%, 12.105% { translate: 0 0 } 22.105% { translate: 28.137em 0 } 25.789% { translate: 36.073em 0 }
  26.711% { translate: -14.925em 0 } 30.921% { translate: -10.746em 0 } 41.974%, 100% { translate: 0 0 }
}
@keyframes o-n1 { 0%, 25% { opacity: 1 } 32%, 33.75% { opacity: 0 } 41.75%, 100% { opacity: 1 } }
@keyframes x-n1 {
  0%, 3.158% { translate: 0 0 } 13.158% { translate: 24.235em 0 } 16.842% { translate: 31.071em 0 }
  17.763% { translate: -23.204em 0 } 21.974% { translate: -16.707em 0 } 33.026%, 100% { translate: 0 0 }
}
@keyframes o-n2 { 0%, 28.5% { opacity: 1 } 35.5%, 37.25% { opacity: 0 } 45.25%, 100% { opacity: 1 } }
@keyframes x-n2 {
  0%, 5% { translate: 0 0 } 15% { translate: 28.727em 0 } 18.684% { translate: 36.829em 0 }
  19.605% { translate: -20.433em 0 } 23.816% { translate: -14.712em 0 } 34.868%, 100% { translate: 0 0 }
}
@keyframes o-n3 { 0%, 32% { opacity: 1 } 39%, 40.75% { opacity: 0 } 48.75%, 100% { opacity: 1 } }
@keyframes x-n3 {
  0%, 6.842% { translate: 0 0 } 16.842% { translate: 28.727em 0 } 20.526% { translate: 36.829em 0 }
  21.447% { translate: -19.711em 0 } 25.658% { translate: -14.192em 0 } 36.711%, 100% { translate: 0 0 }
}
@keyframes o-n4 { 0%, 35.5% { opacity: 1 } 42.5%, 44.25% { opacity: 0 } 52.25%, 100% { opacity: 1 } }
@keyframes x-n4 {
  0%, 8.684% { translate: 0 0 } 18.684% { translate: 26.404em 0 } 22.368% { translate: 33.851em 0 }
  23.289% { translate: -20.995em 0 } 27.5% { translate: -15.117em 0 } 38.553%, 100% { translate: 0 0 }
}
@keyframes o-n5 { 0%, 39% { opacity: 1 } 46%, 47.75% { opacity: 0 } 55.75%, 100% { opacity: 1 } }
@keyframes x-n5 {
  0%, 10.526% { translate: 0 0 } 20.526% { translate: 24.161em 0 } 24.211% { translate: 30.976em 0 }
  25.132% { translate: -24.483em 0 } 29.342% { translate: -17.628em 0 } 40.395%, 100% { translate: 0 0 }
}


/* ---------- Stock card ------------------------------------------------ */
.js-stock-change.is-down {
  color: var(--down, #ff4d4f) !important;
}

.js-stock .swi-stock-svg {
  overflow: visible;
  transition: opacity 0.3s ease;
}

.js-stock.is-loading .swi-stock-svg {
  opacity: 0.35;
}

.js-stock-range {
  transition: background-color 0.25s ease, color 0.25s ease;
}

.js-stock.is-live .js-stock-range:hover {
  color: var(--white);
}

/* TradingView mode: the widget fills the card; the static values step aside. */
.js-stock.is-tv > :not(.swi-stock-tv) {
  visibility: hidden;
}

.swi-stock-tv {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.2rem;
}

.swi-stock-tv .tradingview-widget-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.swi-stock-tv .tradingview-widget-container__widget {
  flex: 1 1 auto;
  min-height: 0;
}

.swi-stock-tv .tradingview-widget-copyright {
  padding: 0.6rem 1.2rem 0;
  font-family: var(--font-text), sans-serif;
  font-size: 1.1rem;
  line-height: 1.2;
}

.swi-stock-tv .tradingview-widget-copyright a {
  color: var(--paper);
}

/* ---------- Switched off in SWI Digital → Settings ------------------ */
body.swi-no-stake-anim .js-stake-icon .sq {
  animation: none;
  fill-opacity: 1;
}