@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap");
.s-hero .hero-widgets .uk-grid-small {
  -ms-grid-rows: auto 6px auto;
      grid-template-areas: "card-left card-right" "card-bottom card-bottom";
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 6px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
}
.s-hero .hero-widgets .uk-grid-small > * {
  padding-left: 0 !important;
  margin-top: 0;
  display: contents;
}
.s-hero .hero-widgets .uk-grid-small > *:last-child {
  width: 100% !important;
}
.s-hero .hero-widgets .card1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  aspect-ratio: 256/300;
  grid-area: card-left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background-image: url("../img/home-hero-card1-bg.png");
  background-size: cover;
}
.s-hero .hero-widgets .card1 .el-image {
  padding: 12px;
  border-radius: 6px;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.05)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}
.s-hero .hero-widgets .card1 .el-image svg {
  width: 1em;
  height: 1em;
  font-size: 1rem;
}
.s-hero .hero-widgets .card2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  aspect-ratio: 256/300;
  grid-area: card-right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-image: url("../img/home-hero-card2-bg.png");
  background-size: cover;
  position: relative;
}
.s-hero .hero-widgets .card2:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--text-primary)), to(var(--text-primary)));
  background: linear-gradient(to bottom, var(--text-primary), var(--text-primary));
  border-radius: inherit;
}
.s-hero .hero-widgets .card2 > * {
  position: relative;
  z-index: 1;
}
.s-hero .hero-widgets .card2 .el-title {
  margin-bottom: auto !important;
}
.s-hero .hero-widgets .card3 {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  width: 100% !important;
  grid-area: card-bottom;
  text-align: center;
  padding: 32px;
  background-image: url("../img/home-hero-card3-bg.png");
  background-size: cover;
}
.s-hero .hero-widgets .card3.el-item {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  gap: 12px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.s-hero .hero-widgets .card3.el-item:before {
  content: "";
  position: absolute;
  inset: 24px 96px;
  z-index: 0;
  opacity: 0.8;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--text-primary)), to(var(--text-primary)));
  background: linear-gradient(to bottom, var(--text-primary), var(--text-primary));
  border-radius: inherit;
}
.s-hero .hero-widgets .card3.el-item > * {
  position: relative;
  z-index: 1;
}
.s-hero .hero-widgets .card3 .el-image svg {
  width: 1em;
  height: 1em;
  font-size: 1.4rem;
  margin-top: -4px;
}
.s-hero .hero-widgets .card3 .el-title {
  margin-top: 0 !important;
  font-size: 14px;
}
.s-hero .trust-stat .uk-grid .el-item {
  border-radius: 6px;
  padding: 24px;
}
.s-hero .trust-stat .uk-grid .el-title {
  font-size: 40px;
}
.s-hero .trust-stat .uk-grid .el-title sup {
  font-size: 0.5em;
  top: -1em;
  color: var(--primary) !important;
}
.s-hero .trust-stat .uk-grid .el-meta {
  margin-top: 0px !important;
}

.s-strip .grid-cards > .uk-grid {
  display: -ms-grid;
  display: grid;
      grid-template-areas: "card-years card-largest card-continents card-exit";
  -ms-grid-columns: auto 1fr 1fr 1fr;
  grid-template-columns: auto 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}
.s-strip .grid-cards .card-years {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: card-years;
  margin-left: 48px;
}
.s-strip .grid-cards .card-largest {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: card-largest;
}
.s-strip .grid-cards .card-continents {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: card-continents;
}
.s-strip .grid-cards .card-exit {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: card-exit;
}
.s-strip .card-years {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  --shimmer-base: var(--white) !important;
  grid-area: card-years;
  padding-right: 40px;
}
.s-strip .card-years .el-title {
  font-size: 64px;
  opacity: 1;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
.s-strip .card-years .el-title span {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}
.s-strip .card-years .el-title sup {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 24px;
  font-weight: 400;
  top: 0;
  line-height: 24px !important;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-top: -16px;
  position: static;
}
.s-strip .card-years .el-title sub {
  top: 0;
  bottom: 0;
  line-height: 1;
  position: static;
  min-height: 12px;
  display: block;
  font-size: 9px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6) !important;
}
.s-strip .uk-grid .el-image {
  margin-left: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 6px;
  width: 60px;
  height: 40px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.05)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}
.s-strip .uk-grid .el-image svg {
  width: 1em;
  height: 1em;
  font-size: 1.5rem;
}

.what-we-do .wwd-right .uk-preserve-color, .s-cards-intro .wwd-right .uk-preserve-color {
  border-radius: 6px;
}
.what-we-do .wwd-right .uk-background-cover, .s-cards-intro .wwd-right .uk-background-cover {
  border-radius: 6px;
  position: relative;
}
.what-we-do .wwd-right .uk-background-cover:before, .s-cards-intro .wwd-right .uk-background-cover:before {
  content: "";
  position: absolute;
  inset: 6px;
  opacity: 0.6;
  background: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0, 0, 0, 0.37)));
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0.37));
  border-radius: inherit;
  z-index: 1;
}
.what-we-do .wwd-right .uk-background-cover .uk-panel, .s-cards-intro .wwd-right .uk-background-cover .uk-panel {
  position: relative;
  z-index: 2;
  color: var(--white) !important;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  font-weight: 450;
}
.what-we-do .wwd-right .uk-background-cover .el-title, .s-cards-intro .wwd-right .uk-background-cover .el-title {
  margin-bottom: auto !important;
}
.what-we-do .wwd-right .uk-background-cover .el-meta, .s-cards-intro .wwd-right .uk-background-cover .el-meta {
  opacity: 0.6;
}
.what-we-do .wwd-grid .el-item, .s-cards-intro .wwd-grid .el-item {
  padding: 24px;
}
.what-we-do .wwd-grid .el-item:hover .el-meta, .s-cards-intro .wwd-grid .el-item:hover .el-meta {
  opacity: 1 !important;
}
.what-we-do .wwd-grid .el-image, .s-cards-intro .wwd-grid .el-image {
  margin-bottom: 48px;
}
.what-we-do .wwd-grid .el-title, .s-cards-intro .wwd-grid .el-title {
  margin-top: 0 !important;
  font-size: 17px;
  font-weight: 500;
}
.what-we-do .wwd-grid .el-meta, .s-cards-intro .wwd-grid .el-meta {
  position: absolute;
  right: 24px;
  top: 0px;
  opacity: 0.3;
}
.what-we-do .wwd-grid .el-content, .s-cards-intro .wwd-grid .el-content {
  margin-top: 12px !important;
  color: var(--text-primary) !important;
  opacity: 0.6;
}

.sublayout {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.sublayout .uk-tile-secondary {
  border-radius: 6px;
  overflow: hidden;
}
.sublayout .s-band {
  padding-top: 96px;
  padding-bottom: 96px;
}

.ai-advantage .right-card {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.ai-advantage .right-card .uk-card {
  aspect-ratio: 250/300;
  max-width: min(100%, 500px);
}

.why-now .wh-grid .el-item {
  padding: 12px;
}
.why-now .wh-grid .el-image {
  position: relative;
  height: 100%;
}
.why-now .wh-grid .el-image:before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  border-left: 1px solid var(--divider-color);
  left: 50%;
  top: 36px;
  height: 100%;
  bottom: 0;
}
:root {
  --primary: #061E9A;
  --secondary: #010829;
  --white: #fff;
  --muted: #F6F4F1;
  --text-primary: var(--secondary);
  --divider-color: rgba(1, 8, 41, 0.10);
  --text-secondary: rgba(var(--text-primary, #010829), 0.6);
  --section-bg: var(--white);
  --shimmer-edge: var(--section-bg);
}

.uk-section-default {
  --section-bg: var(--white);
  --shimmer-edge: var(--section-bg);
}

.uk-section-muted {
  --section-bg: var(--muted);
  --shimmer-edge: var(--section-bg);
}

.uk-section-primary {
  --section-bg: var(--primary);
  --shimmer-edge: var(--section-bg);
}

.uk-section-secondary {
  --section-bg: var(--secondary);
  --shimmer-edge: var(--section-bg);
}

.uk-section .tagline {
  font-size: 14px;
}
.uk-section .uk-heading-large {
  font-size: 72px;
}
.uk-section .uk-heading-medium {
  font-size: 54px;
}
.uk-section .uk-heading-small {
  font-size: 40px;
  font-weight: 550;
  margin-top: 12px !important;
}
.uk-section .uk-text-lead {
  font-size: 17px;
}
.uk-section.bg-white-to-muted {
  --section-bg: var(--muted);
  --shimmer-edge: var(--section-bg);
  background: -webkit-gradient(linear, left top, left bottom, from(var(--white)), to(var(--muted)));
  background: linear-gradient(to bottom, var(--white), var(--muted));
}

.tl-grid {
  margin-top: 24px;
}
.tl-grid .card-now .el-item {
  color: var(--primary);
}
.tl-grid .card-now .el-title {
  font-weight: 600;
}
.tl-grid .card-now .el-meta {
  color: var(--primary) !important;
}
.tl-grid .uk-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr 1fr 1fr;
  grid-template-columns: 1fr 2fr 1fr 1fr;
}
.tl-grid .uk-grid .el-image {
  min-height: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}
.tl-grid .uk-grid .el-image svg {
  position: absolute;
  -o-object-fit: fill;
     object-fit: fill;
  height: 100% !important;
  width: auto;
  max-width: none !important;
}
.tl-grid .uk-grid .el-title {
  font-size: 17px;
  max-width: 250px;
}
.wwb-grid .el-item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr 3fr;
  grid-template-columns: 1fr 2fr 3fr;
      grid-template-areas: "meta title content";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  position: relative;
  min-height: 5rem;
  padding-bottom: 2rem;
  padding-top: 2rem;
  border-bottom: 1px solid var(--divider-color);
  font-variant-numeric: tabular-nums;
}
.wwb-grid .el-item:hover .el-meta {
  opacity: 1 !important;
  overflow: visible !important;
  bottom: -1rem;
}
.wwb-grid .el-title {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: title;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 4rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0 !important;
  font-weight: 500;
}
.wwb-grid .el-meta {
  font-size: 7rem;
  display: block;
  opacity: 0.3;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: absolute;
  bottom: -4rem;
  top: auto;
}
.wwb-grid .el-content {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  margin-top: 0 !important;
  grid-area: content;
}

/* --- Gradient hover cards (ref: Artifact "It's as easy as pie") ---
   Builder-friendly: put class "grad-cards" on the grid wrapper; the
   standard builder card (.el-item.uk-card) gets a gradient layer
   (::before) and a white inner panel inset by 6px (::after), so on
   hover the gradient shows through as a frame around the card. */
.grad-cards .el-item.uk-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* the visible white card is the ::after panel (always inset 6px);
     the element itself is a transparent frame the gradient fills on hover */
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 36px; /* keep content spacing relative to the white panel */
}

.grad-cards .el-item.uk-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity 0.35s ease;
  transition: opacity 0.35s ease;
  /* greyscale map blended (darken) over the brand gradient, as in reference */
  background: url("../img/brand-bg.png") center/cover no-repeat, linear-gradient(135deg, #e0ffa1, #64c6ff 50%, #061e9a);
  background-blend-mode: darken, normal;
}
.grad-cards .el-item {
  position: relative;
}
.grad-cards .el-item .el-meta {
  position: absolute !important;
  top: 0;
  right: 24px;
  opacity: 0.3;
}

.grad-cards .el-item.uk-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 0;
  border-radius: 8px;
  background: #fff;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.grad-cards .el-item.uk-card:hover::before {
  opacity: 1;
}

.grad-cards .el-item.uk-card > * {
  position: relative;
  z-index: 1;
}

.wws-grid .el-item .el-image {
  margin-bottom: 24px !important;
}
.wws-grid .el-item .el-image svg {
  width: 1em;
  height: 1em;
  font-size: 3rem;
}
.wws-grid .el-item .el-content {
  font-size: 17px;
}
.wws-grid .el-item .el-content span {
  font-weight: 500;
  color: var(--text-primary);
}

.kinetic-logo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
}
.kinetic-logo .kinetic-canvas {
  position: absolute;
  inset: 0;
  display: block;
}

*:has(> .flicker-logo) {
  width: 100%;
}

.flicker-logo {
  width: 100%;
  aspect-ratio: 788/111;
  -webkit-mask: url("../img/footer-logo-mask.png") center/contain no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(10%, #000), to(transparent));
  -webkit-mask: url("../img/footer-logo-mask.png") center/contain no-repeat, linear-gradient(to bottom, #000 10%, transparent 100%);
  -webkit-mask-composite: source-in;
  -webkit-mask: url("../img/footer-logo-mask.png") center/contain no-repeat, linear-gradient(to bottom, #000 10%, transparent 100%);
          mask: url("../img/footer-logo-mask.png") center/contain no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(10%, #000), to(transparent));
          mask: url("../img/footer-logo-mask.png") center/contain no-repeat, linear-gradient(to bottom, #000 10%, transparent 100%);
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}
.flicker-logo .flickering-canvas {
  width: 100% !important;
  height: 100% !important;
}

.particle-morph {
  --particle-morph-scale: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 320px;
  max-height: min(75vh, 640px);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.particle-morph .particle-morph__canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--particle-morph-scale));
  height: calc(100% * var(--particle-morph-scale));
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  max-width: none !important;
  max-height: none !important;
}
.particle-morph.particle-morph--logo {
  max-height: min(80vh, 680px);
}
.particle-morph.particle-morph--sculpt {
  --particle-morph-scale: 2;
}
.particle-morph.particle-morph--footer {
  --particle-morph-scale: 1;
  aspect-ratio: 788/111;
  min-height: 0;
  max-height: none;
  width: 100%;
  z-index: 1;
}
.particle-morph.particle-morph--footer .particle-morph__canvas {
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  -webkit-transform: none;
          transform: none;
}

.uk-sticky:has(.particle-morph),
.uk-panel:has(.particle-morph),
.uk-grid > *:has(.particle-morph) {
  overflow: visible;
  position: relative;
  z-index: 0;
}

.uk-grid:has(.particle-morph) > *:not(:has(.particle-morph)) {
  position: relative;
  z-index: 2;
}

.sequence-loop {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 320px;
  max-height: min(70vh, 560px);
  background: #000;
  overflow: hidden;
}
.sequence-loop .sequence-loop__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.sequence-loop.sequence-loop--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

*:has(> .sequence-loop) {
  width: 100%;
}

.commitment .uk-heading-small {
  font-size: 32px;
}

.uk-section {
  padding-top: 96px;
  padding-bottom: 96px;
}

.uk-container-expand {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* --- Artifact-style text roll --- */
.uk-button {
  position: relative;
  border-radius: 999px;
  -webkit-transition: background-color 0.5s cubic-bezier(0.32, 0.72, 0, 1), -webkit-transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  transition: background-color 0.5s cubic-bezier(0.32, 0.72, 0, 1), -webkit-transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.5s cubic-bezier(0.32, 0.72, 0, 1), -webkit-transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.uk-button:active {
  -webkit-transform: scale(0.97);
          transform: scale(0.97);
}

.btn-roll {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4;
  vertical-align: middle;
  top: -0.07em;
}

.btn-roll__line {
  display: block;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

/* друга копія лежить точно під першою */
.btn-roll__line + .btn-roll__line {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

/* ховер: обидва рядки їдуть вгору на 100% */
.uk-button:hover .btn-roll__line {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .btn-roll__line {
    -webkit-transition: none;
    transition: none;
  }
}
/* --- Універсальний інфініті-скрол (marquee), як у референсі ---
   Використання: додати клас `js-marquee` елементу, чиї діти мають прокручуватись
   (наприклад, гріду в YOOtheme). JS у main.js збере дітей у .marquee-group,
   наклонує групи до заповнення контейнера і задасть --marquee-shift/--marquee-duration.

   Опції (класи/атрибути на тому ж елементі):
   - data-marquee-speed="90"  — швидкість у px/s (типово 60)
   - data-marquee-reverse     — рух у зворотний бік
   - marquee--hover-pause     — пауза при наведенні
   - marquee--fade            — фейд по краях
   - --marquee-gap            — відстань між айтемами (типово 48px)
*/
.marquee {
  --marquee-gap: 48px;
  display: block;
  position: relative;
  overflow: hidden;
  margin-left: 0 !important;
  padding: 0;
}

.marquee-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
          animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}

.marquee-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-column-gap: var(--marquee-gap);
     -moz-column-gap: var(--marquee-gap);
          column-gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
}
.marquee-group > * {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  padding-left: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

@-webkit-keyframes marquee-scroll {
  to {
    -webkit-transform: translateX(calc(-1 * var(--marquee-shift, 100%)));
            transform: translateX(calc(-1 * var(--marquee-shift, 100%)));
  }
}

@keyframes marquee-scroll {
  to {
    -webkit-transform: translateX(calc(-1 * var(--marquee-shift, 100%)));
            transform: translateX(calc(-1 * var(--marquee-shift, 100%)));
  }
}
.marquee[data-marquee-reverse] .marquee-track {
  animation-direction: reverse;
}

.marquee--hover-pause:hover .marquee-track {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.marquee--fade {
  mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(8%, #000), color-stop(92%, #000), to(transparent));
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(8%, #000), color-stop(92%, #000), to(transparent));
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    -webkit-animation: none;
            animation: none;
  }
}
/* --- Анімоване "зафарбовування" тексту (маркер зліва направо) ---
   Використання: додати клас `js-paint` до span'а в тексті
   (напр. <span class="uk-text-secondary js-paint">…</span>).
   При скролі в зону видимості текст перефарбовується зліва направо:
   темна плашка їде по тексту, а маска шрифта її відсікає.

   Кольори JS визначає сам: from = поточний колір span'а,
   to = колір батька (заголовка). Перекрити можна атрибутами:
   - data-paint-to="#123"     — колір "фарби"
   - data-paint-delay="200"   — затримка старту, мс
   - --paint-duration         — тривалість (типово .9s)

   До ініціалізації JS елемент виглядає як звичайний текст — без мерехтіння.
*/
.js-paint[data-paint-ready] {
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--paint-to)), to(var(--paint-to))), -webkit-gradient(linear, left top, left bottom, from(var(--paint-from)), to(var(--paint-from)));
  background-image: linear-gradient(var(--paint-to), var(--paint-to)), linear-gradient(var(--paint-from), var(--paint-from));
  background-repeat: no-repeat;
  background-size: 0% 100%, 100% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-transition: background-size var(--paint-duration, 0.9s) cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-size var(--paint-duration, 0.9s) cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-delay: var(--paint-delay, 0s);
          transition-delay: var(--paint-delay, 0s);
}

.js-paint.paint-in {
  background-size: 100% 100%, 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .js-paint[data-paint-ready] {
    -webkit-transition: none;
    transition: none;
  }
}
/* --- Shimmer-заливка тексту (як "engineering" на wireframe.co) ---
   Альтернативний ефект виділення: кольорова смуга один раз
   пробігає по тексту зліва направо і текст лишається у своєму кольорі.

   Використання: клас `js-shimmer` на span'і. Запускається при появі в екрані.
   Базовий колір JS бере з поточного кольору span'а.

   Опції:
   - --shimmer-c1 / --shimmer-c2 / --shimmer-c3 — кольори смуги
   - --shimmer-duration (типово 1.15s)
   - data-shimmer-delay="300" — затримка старту, мс
*/
.js-shimmer.shimmer-in {
  background: -webkit-gradient(linear, left top, right top, from(var(--shimmer-base, currentColor)), color-stop(55%, var(--shimmer-c1, #64c6ff)), color-stop(65%, var(--shimmer-c2, #a5fdff)), color-stop(75%, var(--shimmer-c3, #e0ffa1)), color-stop(90%, var(--shimmer-base, currentColor))) 200%/300% 100%;
  background: linear-gradient(90deg, var(--shimmer-base, currentColor) 0% 40%, var(--shimmer-c1, #64c6ff) 55%, var(--shimmer-c2, #a5fdff) 65%, var(--shimmer-c3, #e0ffa1) 75%, var(--shimmer-base, currentColor) 90% 100%) 200%/300% 100%;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-animation: text-shimmer var(--shimmer-duration, 1.15s) ease-in-out both;
          animation: text-shimmer var(--shimmer-duration, 1.15s) ease-in-out both;
  -webkit-animation-delay: var(--shimmer-delay, 0s);
          animation-delay: var(--shimmer-delay, 0s);
}

@-webkit-keyframes text-shimmer {
  0% {
    -webkit-text-fill-color: transparent;
    background-position: 200%;
  }
  90% {
    -webkit-text-fill-color: transparent;
  }
  to {
    -webkit-text-fill-color: var(--shimmer-base, currentColor);
    background-position: -100%;
  }
}

@keyframes text-shimmer {
  0% {
    -webkit-text-fill-color: transparent;
    background-position: 200%;
  }
  90% {
    -webkit-text-fill-color: transparent;
  }
  to {
    -webkit-text-fill-color: var(--shimmer-base, currentColor);
    background-position: -100%;
  }
}
/* --- Періодичний шиммер тексту: клас `js-shimmer-loop` ---
   Той самий ефект, але повторюється циклічно для привертання уваги.
   Опції: --shimmer-period (повний цикл, деф. 4s; сам пробіг ~30% циклу),
   --shimmer-delay (розсинхрон кількох елементів), ті самі --shimmer-c1/c2/c3. */
.js-shimmer-loop[data-shimmer-ready] {
  background-image: -webkit-gradient(linear, left top, right top, from(var(--shimmer-base, currentColor)), color-stop(44%, var(--shimmer-c1, #64c6ff)), color-stop(48%, var(--shimmer-c2, #a5fdff)), color-stop(52%, var(--shimmer-c3, #e0ffa1)), color-stop(58%, var(--shimmer-base, currentColor)));
  background-image: linear-gradient(90deg, var(--shimmer-base, currentColor) 0% 38%, var(--shimmer-c1, #64c6ff) 44%, var(--shimmer-c2, #a5fdff) 48%, var(--shimmer-c3, #e0ffa1) 52%, var(--shimmer-base, currentColor) 58% 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
}

.js-shimmer-loop.shimmer-loop-in {
  -webkit-animation: text-shimmer-loop var(--shimmer-period, 12s) ease-in-out infinite;
          animation: text-shimmer-loop var(--shimmer-period, 12s) ease-in-out infinite;
  -webkit-animation-delay: var(--shimmer-delay, 0s);
          animation-delay: var(--shimmer-delay, 0s);
}

@-webkit-keyframes text-shimmer-loop {
  0% {
    background-position: 100% 0;
  }
  10%, 100% {
    background-position: 0% 0;
  }
}

@keyframes text-shimmer-loop {
  0% {
    background-position: 100% 0;
  }
  10%, 100% {
    background-position: 0% 0;
  }
}
/* --- Шиммер для іконок: клас `js-shimmer-icon` ---
   background-clip: text не працює на SVG, тому для іконок (uk-icon з
   currentColor) — кольорова хвиля по color з тих самих кольорів. */
.js-shimmer-icon.shimmer-loop-in {
  -webkit-animation: icon-shimmer-loop var(--shimmer-period, 12s) ease-in-out infinite;
          animation: icon-shimmer-loop var(--shimmer-period, 12s) ease-in-out infinite;
  -webkit-animation-delay: var(--shimmer-delay, 0s);
          animation-delay: var(--shimmer-delay, 0s);
}

@-webkit-keyframes icon-shimmer-loop {
  0%, 10%, 100% {
    color: var(--shimmer-base, currentColor);
  }
  3% {
    color: var(--shimmer-c1, #64c6ff);
  }
  5% {
    color: var(--shimmer-c2, #a5fdff);
  }
  7% {
    color: var(--shimmer-c3, #e0ffa1);
  }
}

@keyframes icon-shimmer-loop {
  0%, 10%, 100% {
    color: var(--shimmer-base, currentColor);
  }
  3% {
    color: var(--shimmer-c1, #64c6ff);
  }
  5% {
    color: var(--shimmer-c2, #a5fdff);
  }
  7% {
    color: var(--shimmer-c3, #e0ffa1);
  }
}
/* --- Веселковий блік на ховер: клас `shimmer-hover` ---
   Два режими:
   1) дефолт (лого / картки / медіа) — ::after + mix-blend-mode: screen
      (підсвічує темні гліфи/іконки; на білому тлі «маска» без прямокутника)
   2) текст (.shimmer-hover--text, ставить JS) — дубль тексту в ::after з
      background-clip: text. Працює на будь-якому фоні секції, без прямокутника.
      Сумісно з js-paint (clip на ::after, не на самому span).

   Смуга всередині (inset: 0 / background-position), idle = opacity 0. */
.shimmer-hover {
  position: relative;
  overflow: hidden;
}
.shimmer-hover::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  opacity: 0;
  background-image: linear-gradient(115deg, transparent 38%, var(--shimmer-c1, #64c6ff) 46%, var(--shimmer-c2, #a5fdff) 50%, var(--shimmer-c3, #e0ffa1) 54%, transparent 62%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  mix-blend-mode: var(--shine-blend, screen);
  will-change: background-position, opacity;
}
.shimmer-hover:hover::after {
  -webkit-animation: shimmer-hover-sweep 0.9s ease-in-out forwards;
          animation: shimmer-hover-sweep 0.9s ease-in-out forwards;
}

.shimmer-hover--text {
  display: inline-block;
  vertical-align: baseline;
  overflow: visible;
}
.shimmer-hover--text::after {
  content: attr(data-shimmer-text);
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  white-space: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  -webkit-font-kerning: inherit;
          font-kerning: inherit;
  -webkit-font-feature-settings: inherit;
          font-feature-settings: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  background-image: linear-gradient(115deg, var(--shimmer-text-color, currentColor) 38%, var(--shimmer-c1, #64c6ff) 46%, var(--shimmer-c2, #a5fdff) 50%, var(--shimmer-c3, #e0ffa1) 54%, var(--shimmer-text-color, currentColor) 62%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: normal;
}
.shimmer-hover--text:hover {
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background: none !important;
}

.shimmer-hover--logo::after {
  -webkit-mask-image: var(--shimmer-logo-mask);
  mask-image: var(--shimmer-logo-mask);
  -webkit-mask-size: var(--shimmer-logo-mask-size, contain);
  mask-size: var(--shimmer-logo-mask-size, contain);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: var(--shimmer-logo-mask-pos, left center);
  mask-position: var(--shimmer-logo-mask-pos, left center);
  -webkit-mask-source-type: alpha;
  mask-mode: alpha;
  mix-blend-mode: normal;
}

.uk-card.shimmer-hover,
.el-item.shimmer-hover {
  contain: paint;
}

@-webkit-keyframes shimmer-hover-sweep {
  from {
    opacity: 1;
    background-position: 100% 50%;
  }
  to {
    opacity: 1;
    background-position: 0% 50%;
  }
}

@keyframes shimmer-hover-sweep {
  from {
    opacity: 1;
    background-position: 100% 50%;
  }
  to {
    opacity: 1;
    background-position: 0% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-shimmer.shimmer-in {
    -webkit-animation: none;
            animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .js-shimmer-loop[data-shimmer-ready] {
    -webkit-animation: none;
            animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .js-shimmer-icon[data-shimmer-ready],
  .shimmer-hover::after {
    -webkit-animation: none;
            animation: none;
    opacity: 0;
  }
}
/* --- Гібрид js-paint + js-shimmer: клас `js-paint-shimmer` на span'і ---
   Текст стартує в кольорі батька (приглушений), при появі в екрані
   веселкова смуга пробігає зліва направо, а за нею текст лишається
   у власному кольорі span'а (як зверстано).

   Кольори from/to JS визначає сам (як у js-paint), смуга — ті самі змінні,
   що у js-shimmer: --shimmer-c1 / --shimmer-c2 / --shimmer-c3.
   Опції: data-paint-from / data-paint-to, data-ps-delay="300", --ps-duration.

   Геометрія: фон 300% ширини, no-repeat. Зображення: [to 0–38%, смуга 44–52%,
   from 58–100%]. Вікно (елемент) = 1/3 зображення; позиція їде 100% → 0%:
   спочатку видно чистий from, наприкінці — чистий to, смуга проходить L→R. */
.js-paint-shimmer[data-ps-ready] {
  -webkit-text-fill-color: var(--ps-from);
}

.js-paint-shimmer.paint-shimmer-in {
  background-image: -webkit-gradient(linear, left top, right top, from(var(--ps-to)), color-stop(44%, var(--shimmer-c1, #64c6ff)), color-stop(48%, var(--shimmer-c2, #a5fdff)), color-stop(52%, var(--shimmer-c3, #e0ffa1)), color-stop(58%, var(--ps-from)));
  background-image: linear-gradient(90deg, var(--ps-to) 0% 38%, var(--shimmer-c1, #64c6ff) 44%, var(--shimmer-c2, #a5fdff) 48%, var(--shimmer-c3, #e0ffa1) 52%, var(--ps-from) 58% 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: paint-shimmer-sweep var(--ps-duration, 1.15s) ease-in-out both;
          animation: paint-shimmer-sweep var(--ps-duration, 1.15s) ease-in-out both;
  -webkit-animation-delay: var(--ps-delay, 0.8s);
          animation-delay: var(--ps-delay, 0.8s);
}

@-webkit-keyframes paint-shimmer-sweep {
  0% {
    -webkit-text-fill-color: transparent;
    background-position: 100% 0;
  }
  90% {
    -webkit-text-fill-color: transparent;
  }
  to {
    -webkit-text-fill-color: var(--ps-to);
    background-position: 0% 0;
  }
}

@keyframes paint-shimmer-sweep {
  0% {
    -webkit-text-fill-color: transparent;
    background-position: 100% 0;
  }
  90% {
    -webkit-text-fill-color: transparent;
  }
  to {
    -webkit-text-fill-color: var(--ps-to);
    background-position: 0% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-paint-shimmer.paint-shimmer-in {
    -webkit-animation: none;
            animation: none;
    background: none;
    -webkit-text-fill-color: var(--ps-to);
  }
}
/* --- Періодичний блік на елементі (як лінки клієнтів на wireframe.co) ---
   Світла смуга раз на кілька секунд пробігає по елементу зліва направо.
   Чистий CSS, без JS — достатньо додати клас `shine` (лінку, бейджу, карточці).

   Геометрія як у shimmer-hover: inset: 0 + background-position — смуга
   ніколи не виходить за рамку; idle = opacity 0; screen = маска по тексту.

   Опції (CSS-змінні на елементі):
   - --shine-color    — колір бліку (типово rgba(255,255,255,.35))
   - --shine-duration — повний цикл, включно з паузою (типово 4s; сам блік = 20% циклу)
   - --shine-delay    — зсув старту (щоб кілька лінків блікали не синхронно)
   - --shine-blend    — mix-blend-mode (деф. screen)
*/
.shine {
  position: relative;
  overflow: hidden;
}
.shine::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  opacity: 0;
  background-image: linear-gradient(115deg, transparent 38%, var(--shine-color, rgba(255, 255, 255, 0.35)) 50%, transparent 62%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  mix-blend-mode: var(--shine-blend, screen);
  -webkit-animation: shine-sweep var(--shine-duration, 4s) ease-in-out infinite;
          animation: shine-sweep var(--shine-duration, 4s) ease-in-out infinite;
  -webkit-animation-delay: var(--shine-delay, 0s);
          animation-delay: var(--shine-delay, 0s);
  will-change: background-position, opacity;
}

.shine--inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
}

@-webkit-keyframes shine-sweep {
  0%, 20%, 100% {
    opacity: 0;
    background-position: 100% 50%;
  }
  1% {
    opacity: 1;
    background-position: 100% 50%;
  }
  19% {
    opacity: 1;
    background-position: 0% 50%;
  }
}

@keyframes shine-sweep {
  0%, 20%, 100% {
    opacity: 0;
    background-position: 100% 50%;
  }
  1% {
    opacity: 1;
    background-position: 100% 50%;
  }
  19% {
    opacity: 1;
    background-position: 0% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shine::after {
    -webkit-animation: none;
            animation: none;
    opacity: 0;
  }
}
/* --- Поява елементів як в Artifact (Webflow-референс) ---

   1) Оверрайд стандартних UIkit-анімацій появи.
      У кастомайзері YOOtheme просто вибираєте елементу
      Animation → Slide Bottom Small (чи інший *-small напрям / Fade) —
      і отримуєте моушн Artifact: 24px, 750ms, inOutQuart
      (замість стандартних 10px / 0.5s ease-out).
      Затримка — стандартним полем Delay (в Artifact стаггер = 300ms).

   2) Поява картинок "Image Load Effect": клас `js-image-reveal`
      на елементі Image — старт scale(1.1) + blur(5px), при появі
      в екрані чиста картинка за 1.25s outQuart (тайминги оригіналу).
*/
@media (scripting: enabled) {
  [uk-scrollspy-class]:not(.uk-scrollspy-inview),
  [uk-scrollspy*=uk-animation]:not([uk-scrollspy*=target]):not(.uk-scrollspy-inview) {
    opacity: 0;
  }
}
.uk-animation-fade,
.uk-animation-slide-top-small,
.uk-animation-slide-bottom-small,
.uk-animation-slide-left-small,
.uk-animation-slide-right-small {
  -webkit-animation-duration: var(--reveal-duration, 0.75s);
          animation-duration: var(--reveal-duration, 0.75s);
  -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
          animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.uk-animation-slide-bottom-small {
  -webkit-animation-name: acr-fade-up;
          animation-name: acr-fade-up;
}

.uk-animation-slide-top-small {
  -webkit-animation-name: acr-fade-down;
          animation-name: acr-fade-down;
}

.uk-animation-slide-left-small {
  -webkit-animation-name: acr-fade-left;
          animation-name: acr-fade-left;
}

.uk-animation-slide-right-small {
  -webkit-animation-name: acr-fade-right;
          animation-name: acr-fade-right;
}

@-webkit-keyframes acr-fade-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(var(--reveal-distance, 24px));
            transform: translateY(var(--reveal-distance, 24px));
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes acr-fade-up {
  from {
    opacity: 0;
    -webkit-transform: translateY(var(--reveal-distance, 24px));
            transform: translateY(var(--reveal-distance, 24px));
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes acr-fade-down {
  from {
    opacity: 0;
    -webkit-transform: translateY(calc(-1 * var(--reveal-distance, 24px)));
            transform: translateY(calc(-1 * var(--reveal-distance, 24px)));
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes acr-fade-down {
  from {
    opacity: 0;
    -webkit-transform: translateY(calc(-1 * var(--reveal-distance, 24px)));
            transform: translateY(calc(-1 * var(--reveal-distance, 24px)));
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes acr-fade-left {
  from {
    opacity: 0;
    -webkit-transform: translateX(calc(-1 * var(--reveal-distance, 24px)));
            transform: translateX(calc(-1 * var(--reveal-distance, 24px)));
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes acr-fade-left {
  from {
    opacity: 0;
    -webkit-transform: translateX(calc(-1 * var(--reveal-distance, 24px)));
            transform: translateX(calc(-1 * var(--reveal-distance, 24px)));
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes acr-fade-right {
  from {
    opacity: 0;
    -webkit-transform: translateX(var(--reveal-distance, 24px));
            transform: translateX(var(--reveal-distance, 24px));
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes acr-fade-right {
  from {
    opacity: 0;
    -webkit-transform: translateX(var(--reveal-distance, 24px));
            transform: translateX(var(--reveal-distance, 24px));
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.js-image-reveal {
  overflow: hidden;
}
.js-image-reveal img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transition: -webkit-transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: transform, filter;
}
.js-image-reveal.image-reveal-in img {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-filter: blur(0);
          filter: blur(0);
}

img.js-image-reveal {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transition: -webkit-transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: -webkit-transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-filter var(--image-reveal-duration, 1.25s) cubic-bezier(0.165, 0.84, 0.44, 1);
}
img.js-image-reveal.image-reveal-in {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-filter: blur(0);
          filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-image-reveal img,
  img.js-image-reveal {
    -webkit-transform: none;
            transform: none;
    -webkit-filter: none;
            filter: none;
    -webkit-transition: none;
    transition: none;
  }
}
/* --- Hero text cycle: fixed "One" + rolling sentence tails --- */
/* Markup: .js-text-cycle with .text-cycle__sr / __stack / __live (see content/text-cycle.md) */
.js-text-cycle {
  --text-cycle-duration: .4s;
  --text-cycle-ease: cubic-bezier(.77, 0, .175, 1);
  --text-cycle-index: 0;
  position: relative;
}

.text-cycle__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-cycle__stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.text-cycle__sentence {
  display: block;
}

.text-cycle__live {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

.js-text-cycle.text-cycle--live .text-cycle__stack {
  display: none;
}
.js-text-cycle.text-cycle--live .text-cycle__live {
  position: static;
  visibility: visible;
  pointer-events: auto;
}

.text-cycle__fixed {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.text-cycle__viewport {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
}

.text-cycle__track {
  display: block;
  -webkit-transform: translateY(calc(var(--text-cycle-index, 0) * -1em));
          transform: translateY(calc(var(--text-cycle-index, 0) * -1em));
  -webkit-transition: -webkit-transform var(--text-cycle-duration) var(--text-cycle-ease);
  transition: -webkit-transform var(--text-cycle-duration) var(--text-cycle-ease);
  transition: transform var(--text-cycle-duration) var(--text-cycle-ease);
  transition: transform var(--text-cycle-duration) var(--text-cycle-ease), -webkit-transform var(--text-cycle-duration) var(--text-cycle-ease);
}

.text-cycle__track.is-resetting {
  -webkit-transition: none;
  transition: none;
}

.text-cycle__line {
  display: block;
  height: 1em;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .text-cycle__track {
    -webkit-transition: none;
    transition: none;
  }
}
.wpcf7 .wpcf7-list-item {
  margin: 0;
}
.wpcf7 .wpcf7-form-control.wpcf7-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px 20px;
}
.wpcf7 .wpcf7-radio .wpcf7-list-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.wpcf7 .wpcf7-radio .wpcf7-list-item label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}
.wpcf7 .wpcf7-radio .wpcf7-list-item input[type=radio] {
  margin: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.wpcf7 .wpcf7-not-valid-tip {
  font-size: 0.875rem;
  margin-top: 4px;
}
.wpcf7 .wpcf7-response-output {
  margin: 16px 0 0;
}
.wpcf7 .wpcf7-submit {
  width: auto;
}

.talk-timing {
  border: 0;
  padding: 0;
  margin: 0;
}
.talk-timing legend.uk-form-label {
  margin-bottom: 8px;
  float: none;
  width: auto;
}

.leader-modal {
  --leader-modal-radius: 16px;
  width: min(1100px, 100vw - 32px);
  max-width: none;
  border-radius: var(--leader-modal-radius);
  overflow: hidden;
  background: #fff;
  padding: 0;
}
.leader-modal .uk-modal-close-default {
  top: 16px;
  right: 16px;
  z-index: 2;
  color: var(--secondary, #010829);
}

.leader-modal__body {
  min-height: 280px;
}

.leader-bio {
  display: block;
}

.leader-bio__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 0;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
@media (min-width: 960px) {
  .leader-bio__grid {
    -ms-grid-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.leader-bio__text {
  padding: 40px 32px 36px;
}
@media (min-width: 960px) {
  .leader-bio__text {
    padding: 48px 40px 48px 48px;
  }
}

.leader-bio__name {
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 650;
  line-height: 1.2;
  color: var(--secondary, #010829);
}

.leader-bio__role {
  margin: 8px 0 0;
  color: rgba(1, 8, 41, 0.55);
  font-size: 1rem;
  line-height: 1.4;
}

.leader-bio__content {
  margin-top: 20px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(1, 8, 41, 0.78);
}
.leader-bio__content p {
  margin: 0 0 1em;
}
.leader-bio__content p:last-child {
  margin-bottom: 0;
}

.leader-bio__photo {
  background: var(--muted, #f6f4f1);
  min-height: 240px;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}
@media (min-width: 960px) {
  .leader-bio__photo {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
    min-height: 100%;
  }
}
.leader-bio__photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

@media (max-width: 959px) {
  .leader-bio__photo {
    max-height: 320px;
    overflow: hidden;
  }
}
.leader-intro p {
  margin: 0 0 0.75em;
}
.leader-intro p:last-child {
  margin-bottom: 0;
}

.js-leader-card .leader-full,
.el-content .leader-full {
  display: none !important;
}

.leader-card-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--divider-color, rgba(1, 8, 41, 0.1));
}
.leader-card-links.uk-margin-top {
  margin-top: 20px;
}
.leader-card-links .js-leader-open {
  cursor: pointer;
  margin-left: auto;
}

.js-leader-open {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.js-leader-open:not(.uk-button) {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary, #061e9a);
}
.js-leader-open:hover, .js-leader-open:focus {
  text-decoration: underline;
}

.leader-linkedin-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: -8px;
  border-radius: 999px;
  color: var(--secondary, #010829);
  background: none;
  text-decoration: none;
  -webkit-transition: color 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 0.25s cubic-bezier(0.77, 0, 0.175, 1);
}
.leader-linkedin-btn:hover, .leader-linkedin-btn:focus {
  background: none;
  color: var(--primary, #061e9a);
}
.leader-linkedin-btn--modal {
  margin-top: 24px;
  margin-left: -8px;
}

.js-leader-card a.el-link[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .leader-modal,
  .leader-bio__photo img,
  .leader-linkedin-btn {
    -webkit-transition: none !important;
    transition: none !important;
  }
}
@media (max-width: 1199px) {
  .tm-header-mobile .uk-container.uk-container-expand {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .s-page-hero .tm-header-placeholder, .s-hero .tm-header-placeholder {
    display: none !important;
  }
  .s-strip .grid-cards > .uk-grid {
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding-left: 48px;
        grid-template-areas: "card-years . ." "card-largest card-continents card-exit";
  }
  .s-strip .grid-cards > .uk-grid .card-years {
    margin-left: 0px;
  }
  .s-strip .grid-cards > .uk-grid > div {
    display: contents;
  }
  .s-strip .grid-cards > .uk-grid.uk-grid-divider > :not(.uk-first-column)::before {
    display: none;
  }
  .s-strip .grid-cards .card-years {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .s-strip .grid-cards .card-largest {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .s-strip .grid-cards .card-continents {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  .s-strip .grid-cards .card-exit {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
  }
  .s-strip .card-years {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}
@media (max-width: 959px) {
  body {
    font-size: 20px !important;
  }
  .s-strip .grid-cards > .uk-grid {
    -ms-grid-columns: 1fr 2rem 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    -ms-grid-rows: auto 2rem auto;
        grid-template-areas: "card-years card-largest" "card-continents card-exit";
  }
  .s-strip .grid-cards > .uk-grid .card-largest, .s-strip .grid-cards > .uk-grid .card-continents, .s-strip .grid-cards > .uk-grid .card-exit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -ms-grid-column-align: center;
        justify-self: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
  .s-strip .grid-cards > .uk-grid .card-largest .el-image, .s-strip .grid-cards > .uk-grid .card-continents .el-image, .s-strip .grid-cards > .uk-grid .card-exit .el-image {
    margin-left: 0;
  }
  .s-strip .grid-cards > .uk-grid .card-largest div:not(.uk-margin-remove-first-child), .s-strip .grid-cards > .uk-grid .card-continents div:not(.uk-margin-remove-first-child), .s-strip .grid-cards > .uk-grid .card-exit div:not(.uk-margin-remove-first-child) {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .uk-section .tagline {
    font-size: 22px !important;
  }
  .uk-section .uk-heading-large {
    font-size: clamp(52px, 5vw, 64px);
    text-wrap: pretty;
  }
  .uk-section .uk-heading-medium {
    font-size: 54px;
    text-wrap: pretty;
  }
  .uk-section .uk-heading-small {
    font-size: 40px;
    font-weight: 550;
    margin-top: 12px !important;
    text-wrap: pretty;
  }
  .uk-section .uk-h1 {
    font-size: clamp(28px, 8vw, 32px);
  }
  .uk-section .uk-text-lead {
    font-size: 24px;
    text-wrap: pretty;
  }
  .uk-section .uk-text-large {
    font-size: 26px;
  }
  .uk-section.bg-white-to-muted {
    --section-bg: var(--muted);
    --shimmer-edge: var(--section-bg);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--white)), to(var(--muted)));
    background: linear-gradient(to bottom, var(--white), var(--muted));
  }
  .tm-header-mobile .uk-container.uk-container-expand {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .s-strip .grid-cards .card-years {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .s-strip .grid-cards .card-largest {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .s-strip .grid-cards .card-continents {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .s-strip .grid-cards .card-exit {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .s-strip .card-years {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
}
@media (max-width: 639px) {
  body {
    font-size: 16px !important;
  }
  .uk-section .tagline {
    font-size: 18px !important;
  }
  .uk-section .uk-heading-large {
    font-size: clamp(42px, 5vw, 56px);
  }
  .uk-section .uk-heading-medium {
    font-size: clamp(32px, 4vh, 38px);
  }
  .uk-section .uk-heading-small {
    font-size: 26px;
    line-height: 1.4;
    font-weight: 550;
    margin-top: 12px !important;
  }
  .uk-section .uk-h1 {
    font-size: clamp(28px, 8vw, 32px);
  }
  .uk-section .uk-text-lead {
    font-size: 16px;
  }
  .uk-section .uk-text-large {
    font-size: 18px;
  }
  .uk-section.bg-white-to-muted {
    --section-bg: var(--muted);
    --shimmer-edge: var(--section-bg);
    background: -webkit-gradient(linear, left top, left bottom, from(var(--white)), to(var(--muted)));
    background: linear-gradient(to bottom, var(--white), var(--muted));
  }
  .wwb-grid .el-item {
    -ms-grid-columns: 1fr !important;
    grid-template-columns: 1fr !important;
    -ms-grid-rows: auto auto 60px !important;
    grid-template-rows: auto auto 60px !important;
        grid-template-areas: "title" "content" "meta";
  }
  .s-strip .grid-cards > .uk-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 2rem;
    -ms-grid-rows: auto 2rem auto 2rem auto 2rem auto;
        grid-template-areas: "card-years" "card-largest" "card-continents" "card-exit";
  }
  .s-strip .grid-cards > .uk-grid .card-largest, .s-strip .grid-cards > .uk-grid .card-continents, .s-strip .grid-cards > .uk-grid .card-exit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -ms-grid-column-align: center;
        justify-self: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .s-strip .grid-cards > .uk-grid .card-largest .el-image, .s-strip .grid-cards > .uk-grid .card-continents .el-image, .s-strip .grid-cards > .uk-grid .card-exit .el-image {
    margin-left: 0;
  }
  .s-strip .grid-cards > .uk-grid .card-largest div:not(.uk-margin-remove-first-child), .s-strip .grid-cards > .uk-grid .card-continents div:not(.uk-margin-remove-first-child), .s-strip .grid-cards > .uk-grid .card-exit div:not(.uk-margin-remove-first-child) {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .s-strip .grid-cards > .uk-grid .card-years {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    padding-right: 0;
  }
  .s-strip .grid-cards .card-years {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .s-strip .grid-cards .card-largest {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .s-strip .grid-cards .card-continents {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  .s-strip .grid-cards .card-exit {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
  }
  .s-strip .card-years {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .wwb-grid .el-title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .wwb-grid .el-content {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
}