/* =====================================================
   Ullmatech Chapter Header
   Reusable long-form article chapter component
   ===================================================== */

/* =====================================================
   Main container
   ===================================================== */

.ullmatech-chapter-header {
  position: relative !important;

  width: 100% !important;
  max-width: none !important;

  margin: 70px 0 90px !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #101116 !important;

  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 22px !important;

  color: #ffffff !important;

  box-sizing: border-box !important;
}

.ullmatech-chapter-header *,
.ullmatech-chapter-header *::before,
.ullmatech-chapter-header *::after {
  box-sizing: border-box;
}

/* =====================================================
   Inner wrapper
   ===================================================== */

.ullmatech-chapter-header__inner {
  position: relative !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  padding: 48px 55px 0 !important;
}

/* =====================================================
   Main two-column layout
   ===================================================== */

.ullmatech-chapter-header__main {
  display: grid !important;

  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr) !important;

  gap: 20px !important;

  align-items: center !important;

  width: 100% !important;

  min-height: 410px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* =====================================================
   Copy column
   ===================================================== */

.ullmatech-chapter-header__copy {
  position: relative !important;
  z-index: 2 !important;

  width: 100% !important;
  max-width: 760px !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* =====================================================
   CHAPTER eyebrow
   ===================================================== */

.ullmatech-chapter-header__eyebrow {
  display: flex !important;

  align-items: center !important;
  gap: 20px !important;

  width: 100% !important;

  margin: 0 0 20px !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.55) !important;

  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
}

.ullmatech-chapter-header__eyebrow-line {
  display: block !important;

  width: 220px !important;
  height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: rgba(255, 255, 255, 0.3) !important;
}

/* =====================================================
   Chapter number + label
   ===================================================== */

.ullmatech-chapter-header__chapter-number {
  display: flex !important;

  align-items: center !important;

  width: 100% !important;

  margin: 0 0 28px !important;
  padding: 0 !important;

  color: #ef2460 !important;

  font-family: inherit !important;
  font-size: clamp(82px, 8vw, 120px) !important;
  font-weight: 800 !important;
  line-height: 0.82 !important;

  letter-spacing: -0.07em !important;
}

.ullmatech-chapter-header__chapter-divider {
  display: block !important;

  flex: 0 0 1px !important;

  width: 1px !important;
  height: 78px !important;

  margin: 0 28px !important;

  background: rgba(255, 255, 255, 0.45) !important;
}

.ullmatech-chapter-header__label {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ef2460 !important;

  font-family: inherit !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.18em !important;
}

/* =====================================================
   Chapter title
   ===================================================== */

.ullmatech-chapter-header__title {
  display: block !important;

  width: 100% !important;
  max-width: 720px !important;

  margin: 0 0 26px !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: inherit !important;
  font-size: clamp(40px, 4.2vw, 62px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;

  letter-spacing: -0.045em !important;

  text-transform: none !important;
}

/* =====================================================
   Intro
   ===================================================== */

.ullmatech-chapter-header__intro {
  display: block !important;

  width: 100% !important;
  max-width: 650px !important;

  margin: 0 0 32px !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.68) !important;

  font-family: inherit !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Remove paragraph margins if WordPress wraps intro content */

.ullmatech-chapter-header__intro p {
  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  font-size: inherit !important;
  line-height: inherit !important;
}

/* =====================================================
   Metadata
   ===================================================== */

.ullmatech-chapter-header__meta {
  display: flex !important;

  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 18px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.55) !important;

  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.12em !important;
}

.ullmatech-chapter-header__meta-item {
  display: flex !important;

  align-items: center !important;
  gap: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;
}

.ullmatech-chapter-header__meta-divider {
  display: block !important;

  width: 1px !important;
  height: 24px !important;

  margin: 0 !important;

  background: rgba(255, 255, 255, 0.2) !important;
}

.ullmatech-chapter-header__clock,
.ullmatech-chapter-header__list-icon {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ef2460 !important;
}

.ullmatech-chapter-header__clock svg,
.ullmatech-chapter-header__list-icon svg {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* =====================================================
   Desktop illustration - larger / stronger visual balance
   ===================================================== */

.ullmatech-chapter-header__visual {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  min-height: 380px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  transform: translate(-15px, 10px) !important;
}

.ullmatech-chapter-magnet {
  display: block !important;

  width: 135% !important;
  max-width: 700px !important;
  height: auto !important;

  margin: 0 -35px 0 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}

/* Browser */

.ullmatech-chapter-browser rect:first-child {
  fill: rgba(255, 255, 255, 0.035) !important;
  stroke: rgba(255, 255, 255, 0.22) !important;
  stroke-width: 1.5 !important;
}

.ullmatech-chapter-browser circle {
  fill: rgba(255, 255, 255, 0.45) !important;
}

.ullmatech-chapter-browser rect:not(:first-child) {
  fill: rgba(255, 255, 255, 0.12) !important;
}

.ullmatech-chapter-browser__button {
  fill: #ef2460 !important;
}

/* Magnet */

.ullmatech-magnet {
  fill: #171820 !important;
  stroke: rgba(255, 255, 255, 0.2) !important;
  stroke-width: 2 !important;
}

.ullmatech-magnet-end {
  fill: #ef2460 !important;
  stroke: #ef2460 !important;
}

/* Attraction paths */

.ullmatech-attraction-path {
  fill: none !important;

  stroke: #ef2460 !important;
  stroke-width: 2 !important;

  stroke-dasharray: 7 8 !important;

  opacity: 0.9 !important;

  animation: ullmatech-attraction-flow 2.8s linear infinite !important;
}

@keyframes ullmatech-attraction-flow {
  to {
    stroke-dashoffset: -30;
  }
}

/* People */

.ullmatech-person {
  fill: rgba(255, 255, 255, 0.06) !important;
  stroke: rgba(255, 255, 255, 0.3) !important;
  stroke-width: 1.5 !important;
}

.ullmatech-person circle {
  fill: rgba(255, 255, 255, 0.08) !important;
}

.ullmatech-person path {
  fill: none !important;

  stroke: rgba(255, 255, 255, 0.65) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
}

.ullmatech-person--one,
.ullmatech-person--two,
.ullmatech-person--three {
  transform-box: fill-box;
  transform-origin: center;

  animation: ullmatech-person-pulse 3s ease-in-out infinite !important;
}

.ullmatech-person--two {
  animation-delay: 0.4s !important;
}

.ullmatech-person--three {
  animation-delay: 0.8s !important;
}

.ullmatech-person--wrong {
  stroke: #ef2460 !important;
}

.ullmatech-person--wrong path {
  stroke: #ef2460 !important;
  stroke-width: 3 !important;
}

@keyframes ullmatech-person-pulse {
  0%,
  100% {
    opacity: 0.65;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

/* =====================================================
   Bottom chapter navigation
   ===================================================== */

.ullmatech-chapter-nav {
  display: grid !important;

  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;

  width: 100% !important;

  margin: 15px 0 0 !important;
  padding: 0 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.ullmatech-chapter-nav__item {
  position: relative !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  min-width: 0 !important;
  min-height: 88px !important;

  margin: 0 !important;
  padding: 15px 12px !important;

  color: rgba(255, 255, 255, 0.48) !important;

  font-family: inherit !important;

  text-decoration: none !important;

  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;

  transition:
    color 0.2s ease,
    background 0.2s ease !important;
}

.ullmatech-chapter-nav__item:last-child {
  border-right: 0 !important;
}

.ullmatech-chapter-nav__item:hover {
  color: #ffffff !important;

  background: rgba(255, 255, 255, 0.035) !important;
}

.ullmatech-chapter-nav__item.is-active {
  color: #ffffff !important;

  background: #ef2460 !important;
}

.ullmatech-chapter-nav__number {
  display: block !important;

  margin: 0 0 7px !important;
  padding: 0 !important;

  color: inherit !important;

  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.ullmatech-chapter-nav__label {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;

  letter-spacing: 0 !important;
}

/* =====================================================
   Reduced motion
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-attraction-path,
  .ullmatech-person--one,
  .ullmatech-person--two,
  .ullmatech-person--three {
    animation: none !important;
  }
}

/* =====================================================
   Tablet
   ===================================================== */

@media (max-width: 1100px) {
  .ullmatech-chapter-header__inner {
    padding: 45px 40px 0 !important;
  }

  .ullmatech-chapter-header__main {
    grid-template-columns: 1fr !important;

    min-height: auto !important;

    padding-bottom: 45px !important;
  }

  .ullmatech-chapter-header__visual {
    display: none !important;
  }

  .ullmatech-chapter-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* =====================================================
   Mobile
   ===================================================== */

@media (max-width: 700px) {
  .ullmatech-chapter-header {
    margin: 45px 0 60px !important;

    border-radius: 14px !important;
  }

  .ullmatech-chapter-header__inner {
    padding: 38px 25px 0 !important;
  }

  .ullmatech-chapter-header__main {
    min-height: auto !important;

    padding-bottom: 35px !important;
  }

  .ullmatech-chapter-header__eyebrow {
    gap: 12px !important;

    margin-bottom: 16px !important;

    font-size: 10px !important;
    letter-spacing: 0.22em !important;
  }

  .ullmatech-chapter-header__eyebrow-line {
    width: 70px !important;
  }

  .ullmatech-chapter-header__chapter-number {
    margin-bottom: 24px !important;

    font-size: 72px !important;
  }

  .ullmatech-chapter-header__chapter-divider {
    height: 52px !important;

    margin: 0 17px !important;
  }

  .ullmatech-chapter-header__label {
    font-size: 14px !important;
  }

  .ullmatech-chapter-header__title {
    font-size: 38px !important;
    line-height: 1.04 !important;
  }

  .ullmatech-chapter-header__intro {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  .ullmatech-chapter-header__meta {
    gap: 12px !important;

    font-size: 10px !important;
  }

  .ullmatech-chapter-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ullmatech-chapter-nav__item {
    min-height: 65px !important;
  }
}

/* =====================================================
   Ullmatech Chapter Header - breakout layout
   ===================================================== */

.prose.editorial-content > .ullmatech-chapter-header {
  width: 945px !important;
  max-width: calc(100vw - 80px) !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}

/* =====================================================
   Active chapter navigation
   ===================================================== */

.ullmatech-chapter-nav__item.is-active,
.ullmatech-chapter-nav__item.is-active .ullmatech-chapter-nav__number,
.ullmatech-chapter-nav__item.is-active .ullmatech-chapter-nav__label {
  color: #ffffff !important;
}

/* =====================================================
   Chapter 02 - Explain illustration
   ===================================================== */

.ullmatech-chapter-explain {
  display: block !important;
  width: 135% !important;
  max-width: 700px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Main website panels */

.ullmatech-chapter-explain .ullmatech-explain-confused > rect:first-child,
.ullmatech-chapter-explain .ullmatech-explain-clear > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

/* Browser details */

.ullmatech-chapter-explain circle,
.ullmatech-chapter-explain .ullmatech-explain-confused > rect:not(:first-child),
.ullmatech-chapter-explain .ullmatech-explain-clear > rect:not(:first-child) {
  fill: #292c34;
  stroke: #777a83;
}

/* Browser dots */

.ullmatech-chapter-explain .ullmatech-explain-confused > circle,
.ullmatech-chapter-explain .ullmatech-explain-clear > circle {
  stroke: none;
  fill: #777a83;
}

/* Pink question marks */

.ullmatech-explain-question circle {
  fill: #171820 !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
}

.ullmatech-explain-question text {
  fill: #f51b5b;
  font-size: 30px;
  font-weight: 700;
}

/* Transformation arrow */

.ullmatech-explain-arrow line,
.ullmatech-explain-arrow polyline {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Clear website heading */

.ullmatech-explain-clear__heading {
  fill: #e6e7ea !important;
  stroke: none !important;
}

/* Pink CTA */

.ullmatech-explain-clear__button {
  fill: #f51b5b !important;
  stroke: none !important;
}

/* Success tick */

.ullmatech-explain-success circle {
  fill: #171820;
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-explain-success polyline {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================
   Subtle animation
   ===================================================== */

.ullmatech-explain-question--one {
  animation: ullmatechExplainQuestionOne 2.8s ease-in-out infinite;
}

.ullmatech-explain-question--two {
  animation: ullmatechExplainQuestionTwo 3.2s ease-in-out infinite;
}

.ullmatech-explain-arrow {
  animation: ullmatechExplainArrow 2.4s ease-in-out infinite;
  transform-origin: center;
}

.ullmatech-explain-success {
  animation: ullmatechExplainSuccess 2.8s ease-in-out infinite;
  transform-origin: 490px 45px;
}

@keyframes ullmatechExplainQuestionOne {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ullmatechExplainQuestionTwo {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes ullmatechExplainArrow {
  0%,
  100% {
    opacity: 0.45;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(8px);
  }
}

@keyframes ullmatechExplainSuccess {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* Respect accessibility preferences */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-explain-question--one,
  .ullmatech-explain-question--two,
  .ullmatech-explain-arrow,
  .ullmatech-explain-success {
    animation: none !important;
  }
}

/* =====================================================
   Chapter navigation - span full header width
   ===================================================== */

.ullmatech-chapter-nav {
  grid-column: 1 / -1 !important;

  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

.ullmatech-chapter-nav__item {
  min-width: 0 !important;
  width: 100% !important;
}

/* =====================================================
   Chapter 03 - Customer illustration
   ===================================================== */

.ullmatech-chapter-customer {
  display: block !important;
  width: 135% !important;
  max-width: 700px !important;
  height: auto !important;
  overflow: visible !important;
}

/* =====================================================
   Orbit
   ===================================================== */

.ullmatech-customer-orbit {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 1.5;
  opacity: 0.22;
  stroke-dasharray: 4 9;
}

.ullmatech-customer-orbit--inner {
  opacity: 0.14;
  stroke-dasharray: 2 8;
}

/* =====================================================
   Website cards
   ===================================================== */

.ullmatech-customer-card > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-customer-card
  > circle:not(.ullmatech-customer-pink-stroke):not(
    .ullmatech-customer-message-icon
  ) {
  fill: #777a83;
  stroke: none;
}

.ullmatech-customer-card rect:not(:first-child) {
  fill: #555963;
  stroke: none;
}

.ullmatech-customer-card line {
  stroke: #777a83;
  stroke-width: 2;
}

/* Pink card elements */

.ullmatech-customer-pink-stroke {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
}

.ullmatech-customer-pink-line {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
}

.ullmatech-customer-pink-fill {
  fill: #f51b5b !important;
  stroke: none !important;
}

/* Message icon */

.ullmatech-customer-message-icon {
  fill: #171820 !important;
  stroke: #f51b5b !important;
  stroke-width: 2 !important;
}

/* =====================================================
   Connections
   ===================================================== */

.ullmatech-customer-connections path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  stroke-dasharray: 6 8;
  opacity: 0.65;
}

/* =====================================================
   Client
   ===================================================== */

.ullmatech-customer-client-ring {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  opacity: 0.75;
}

.ullmatech-customer-client-ring--inner {
  opacity: 0.3;
}

.ullmatech-customer-client-platform {
  fill: #f51b5b;
  opacity: 0.75;
}

.ullmatech-customer-client-body {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-customer-tablet {
  fill: #292c34;
  stroke: #f51b5b;
  stroke-width: 2;
}

.ullmatech-customer-client-label {
  fill: #f51b5b;
  stroke: none;
}

.ullmatech-customer-client-label-text {
  fill: #111217;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

/* CTA */

.ullmatech-customer-cta {
  fill: #f51b5b !important;
  stroke: none !important;
}

.ullmatech-customer-cta-arrow {
  fill: none !important;
  stroke: #111217 !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================
   Animation
   ===================================================== */

.ullmatech-customer-card {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechCustomerFloat 5s ease-in-out infinite;
}

.ullmatech-customer-card--search {
  animation-delay: -1s;
}

.ullmatech-customer-card--content {
  animation-delay: -2s;
}

.ullmatech-customer-card--services {
  animation-delay: -3s;
}

.ullmatech-customer-card--analytics {
  animation-delay: -4s;
}

.ullmatech-customer-card--message {
  animation-delay: -2.5s;
}

.ullmatech-customer-card--cta {
  animation-delay: -1.5s;
}

.ullmatech-customer-client-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechCustomerPulse 3s ease-in-out infinite;
}

.ullmatech-customer-client-ring--inner {
  animation-delay: -1.5s;
}

.ullmatech-customer-client-platform {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechCustomerPlatform 3s ease-in-out infinite;
}

.ullmatech-customer-connections path {
  animation: ullmatechCustomerConnections 3s ease-in-out infinite;
}

.ullmatech-customer-nodes circle {
  fill: #f51b5b;
  animation: ullmatechCustomerNode 3s ease-in-out infinite;
}

.ullmatech-customer-nodes circle:nth-child(2) {
  animation-delay: -0.75s;
}

.ullmatech-customer-nodes circle:nth-child(3) {
  animation-delay: -1.5s;
}

.ullmatech-customer-nodes circle:nth-child(4) {
  animation-delay: -2.25s;
}

@keyframes ullmatechCustomerFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes ullmatechCustomerPulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.85;
    transform: scale(1.03);
  }
}

@keyframes ullmatechCustomerPlatform {
  0%,
  100% {
    opacity: 0.5;
    transform: scaleX(0.95);
  }

  50% {
    opacity: 0.9;
    transform: scaleX(1);
  }
}

@keyframes ullmatechCustomerConnections {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.85;
  }
}

@keyframes ullmatechCustomerNode {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* =====================================================
   Accessibility
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-customer-card,
  .ullmatech-customer-client-ring,
  .ullmatech-customer-client-platform,
  .ullmatech-customer-connections path,
  .ullmatech-customer-nodes circle {
    animation: none !important;
  }
}

/* =====================================================
   Chapter 04 - Next Step
   ===================================================== */

.ullmatech-chapter-next-step {
  display: block !important;
  width: 135% !important;
  max-width: 700px !important;
  height: auto !important;
  overflow: visible !important;
}

/* =====================================================
   Website / stage panels
   ===================================================== */

.ullmatech-next-step-stage > rect:first-child,
.ullmatech-next-step-cta > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-next-step-stage > circle,
.ullmatech-next-step-stage > rect:not(:first-child) {
  fill: #555963;
  stroke: none;
}

/* =====================================================
   Person
   ===================================================== */

.ullmatech-next-step-person__body {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-next-step-person__limb {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================
   Pink elements
   ===================================================== */

.ullmatech-next-step-pink-fill {
  fill: #f51b5b !important;
  stroke: none !important;
}

.ullmatech-next-step-pink-outline {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
}

.ullmatech-next-step-pink-line {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================
   Journey path
   ===================================================== */

.ullmatech-next-step-path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  opacity: 0.3;
}

.ullmatech-next-step-path-highlight {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 4;
  stroke-linecap: round;

  stroke-dasharray: 18 22;

  animation: ullmatechNextStepPath 2.5s linear infinite;
}

/* =====================================================
   Checkpoints
   ===================================================== */

.ullmatech-next-step-checkpoints circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;

  animation: ullmatechNextStepCheckpoint 2.4s ease-in-out infinite;
}

.ullmatech-next-step-checkpoints circle:nth-child(2) {
  animation-delay: -0.8s;
}

.ullmatech-next-step-checkpoints circle:nth-child(3) {
  animation-delay: -1.6s;
}

/* =====================================================
   Direction arrows
   ===================================================== */

.ullmatech-next-step-arrow line,
.ullmatech-next-step-arrow polyline {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ullmatech-next-step-arrow {
  animation: ullmatechNextStepArrow 2s ease-in-out infinite;
}

.ullmatech-next-step-arrow--two {
  animation-delay: -1s;
}

/* =====================================================
   CTA
   ===================================================== */

.ullmatech-next-step-cta > circle {
  fill: #777a83;
  stroke: none;
}

.ullmatech-next-step-cta > rect:not(:first-child) {
  fill: #292c34;
  stroke: none;
}

.ullmatech-next-step-cta__heading {
  fill: #e6e7ea !important;
}

.ullmatech-next-step-cta__button {
  fill: #f51b5b !important;
}

/* =====================================================
   Send icon
   ===================================================== */

.ullmatech-next-step-send circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-next-step-send path {
  fill: #f51b5b;
  stroke: none;
}

/* =====================================================
   Animation
   ===================================================== */

.ullmatech-next-step-person {
  animation: ullmatechNextStepWalk 3.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ullmatech-next-step-stage--one {
  animation: ullmatechNextStepFloat 5s ease-in-out infinite;
}

.ullmatech-next-step-stage--two {
  animation: ullmatechNextStepFloat 5s ease-in-out infinite -1.5s;
}

.ullmatech-next-step-stage--three {
  animation: ullmatechNextStepFloat 5s ease-in-out infinite -3s;
}

.ullmatech-next-step-cta {
  animation: ullmatechNextStepCTA 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ullmatech-next-step-send {
  animation: ullmatechNextStepSend 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes ullmatechNextStepPath {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -80;
  }
}

@keyframes ullmatechNextStepCheckpoint {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes ullmatechNextStepArrow {
  0%,
  100% {
    opacity: 0.35;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(5px);
  }
}

@keyframes ullmatechNextStepWalk {
  0%,
  100% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(8px);
  }
}

@keyframes ullmatechNextStepFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes ullmatechNextStepCTA {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.025);
  }
}

@keyframes ullmatechNextStepSend {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* =====================================================
   Reduced motion
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-next-step-path-highlight,
  .ullmatech-next-step-checkpoints circle,
  .ullmatech-next-step-arrow,
  .ullmatech-next-step-person,
  .ullmatech-next-step-stage--one,
  .ullmatech-next-step-stage--two,
  .ullmatech-next-step-stage--three,
  .ullmatech-next-step-cta,
  .ullmatech-next-step-send {
    animation: none !important;
  }
}

/* =====================================================
   Chapter 05 - Trust
   ===================================================== */

.ullmatech-chapter-trust {
  display: block !important;
  width: 135% !important;
  max-width: 700px !important;
  height: auto !important;
  overflow: visible !important;
}

/* =====================================================
   Orbit
   ===================================================== */

.ullmatech-trust-orbit {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 1.5;
  opacity: 0.25;
  stroke-dasharray: 5 9;
}

.ullmatech-trust-orbit--inner {
  opacity: 0.15;
  stroke-dasharray: 3 8;
}

/* =====================================================
   Trust cards
   ===================================================== */

.ullmatech-trust-card > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-trust-card > circle:not(.ullmatech-trust-pink-outline) {
  fill: #777a83;
  stroke: none;
}

.ullmatech-trust-card > rect:not(:first-child) {
  fill: #555963;
  stroke: none;
}

/* =====================================================
   Pink elements
   ===================================================== */

.ullmatech-trust-pink-outline {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
}

.ullmatech-trust-pink-line {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ullmatech-trust-pink-fill {
  fill: #f51b5b !important;
  stroke: none !important;
}

.ullmatech-trust-case-button {
  fill: #f51b5b !important;
  stroke: none !important;
}

/* =====================================================
   Five-star rating
   ===================================================== */

.ullmatech-trust-stars path {
  fill: #f51b5b;
  stroke: none;
}

/* =====================================================
   Central shield
   ===================================================== */

.ullmatech-trust-shield-ring {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  opacity: 0.55;
}

.ullmatech-trust-shield-body {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-trust-shield-tick {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ullmatech-trust-shield-inner {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 1.5;
  opacity: 0.25;
}

/* =====================================================
   Connection paths
   ===================================================== */

.ullmatech-trust-connections path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  stroke-dasharray: 7 9;
  opacity: 0.65;
}

/* =====================================================
   Floating nodes
   ===================================================== */

.ullmatech-trust-nodes circle {
  fill: #f51b5b;
  stroke: none;
}

/* =====================================================
   Animation
   ===================================================== */

.ullmatech-trust-orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechTrustOrbit 14s linear infinite;
}

.ullmatech-trust-orbit--inner {
  animation-direction: reverse;
  animation-duration: 10s;
}

/* Cards gently float */

.ullmatech-trust-card {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechTrustFloat 5s ease-in-out infinite;
}

.ullmatech-trust-card--case {
  animation-delay: -1.2s;
}

.ullmatech-trust-card--accreditation {
  animation-delay: -2.4s;
}

.ullmatech-trust-card--experience {
  animation-delay: -3.6s;
}

/* Shield pulses */

.ullmatech-trust-shield {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechTrustShield 3.5s ease-in-out infinite;
}

/* Connections breathe */

.ullmatech-trust-connections path {
  animation: ullmatechTrustConnections 3s ease-in-out infinite;
}

.ullmatech-trust-connections path:nth-child(2) {
  animation-delay: -0.75s;
}

.ullmatech-trust-connections path:nth-child(3) {
  animation-delay: -1.5s;
}

.ullmatech-trust-connections path:nth-child(4) {
  animation-delay: -2.25s;
}

/* Stars illuminate one after another */

.ullmatech-trust-stars path {
  opacity: 0.45;
  animation: ullmatechTrustStar 2.5s ease-in-out infinite;
}

.ullmatech-trust-stars path:nth-child(2) {
  animation-delay: 0.15s;
}

.ullmatech-trust-stars path:nth-child(3) {
  animation-delay: 0.3s;
}

.ullmatech-trust-stars path:nth-child(4) {
  animation-delay: 0.45s;
}

.ullmatech-trust-stars path:nth-child(5) {
  animation-delay: 0.6s;
}

/* Nodes pulse */

.ullmatech-trust-nodes circle {
  animation: ullmatechTrustNode 2.8s ease-in-out infinite;
}

.ullmatech-trust-nodes circle:nth-child(2) {
  animation-delay: -0.7s;
}

.ullmatech-trust-nodes circle:nth-child(3) {
  animation-delay: -1.4s;
}

.ullmatech-trust-nodes circle:nth-child(4) {
  animation-delay: -2.1s;
}

/* =====================================================
   Keyframes
   ===================================================== */

@keyframes ullmatechTrustOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes ullmatechTrustFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes ullmatechTrustShield {
  0%,
  100% {
    transform: scale(0.98);
  }

  50% {
    transform: scale(1.04);
  }
}

@keyframes ullmatechTrustConnections {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.9;
  }
}

@keyframes ullmatechTrustStar {
  0%,
  100% {
    opacity: 0.4;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes ullmatechTrustNode {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* =====================================================
   Reduced motion
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-trust-orbit,
  .ullmatech-trust-card,
  .ullmatech-trust-shield,
  .ullmatech-trust-connections path,
  .ullmatech-trust-stars path,
  .ullmatech-trust-nodes circle {
    animation: none !important;
  }
}

/* =====================================================
   Chapter 06 - Questions
   ===================================================== */

.ullmatech-chapter-questions {
  display: block !important;
  width: 135% !important;
  max-width: 700px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Main FAQ panel */

.ullmatech-questions-panel > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-questions-panel > circle {
  fill: #777a83;
  stroke: none;
}

/* Search */

.ullmatech-questions-search {
  fill: #171920 !important;
  stroke: #f51b5b !important;
  stroke-width: 2 !important;
}

.ullmatech-questions-search-icon {
  fill: none !important;
  stroke: #aeb1ba !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
}

.ullmatech-questions-panel > rect:not(.ullmatech-questions-search) {
  fill: #555963;
  stroke: none;
}

/* FAQ rows */

.ullmatech-questions-row > rect:first-child {
  fill: #181a20;
  stroke: #353842;
  stroke-width: 1;
}

.ullmatech-questions-row-icon {
  fill: #171820 !important;
  stroke: #f51b5b !important;
  stroke-width: 2 !important;
}

.ullmatech-questions-pink-line {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
}

.ullmatech-questions-chevron {
  fill: none !important;
  stroke: #777a83 !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Lightbulb */

.ullmatech-questions-bulb-ring {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  opacity: 0.7;
}

.ullmatech-questions-bulb-body {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-questions-bulb-line {
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
}

/* Question cards */

.ullmatech-questions-card > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-questions-card > circle:not(.ullmatech-questions-card-question) {
  fill: #777a83;
  stroke: none;
}

.ullmatech-questions-card > rect:not(:first-child) {
  fill: #555963;
  stroke: none;
}

.ullmatech-questions-card-question {
  fill: #171820 !important;
  stroke: #f51b5b !important;
  stroke-width: 2 !important;
}

.ullmatech-questions-question-mark {
  fill: #f51b5b;
  font-size: 20px;
  font-weight: 700;
}

/* Connecting paths */

.ullmatech-questions-connections path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  stroke-dasharray: 6 8;
  opacity: 0.55;
}

/* Floating nodes */

.ullmatech-questions-nodes circle {
  fill: #f51b5b;
}

/* =====================================================
   Animation
   ===================================================== */

.ullmatech-questions-orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechQuestionsOrbit 16s linear infinite;
}

.ullmatech-questions-orbit--inner {
  animation-direction: reverse;
  animation-duration: 11s;
}

/* Question cards gently float */

.ullmatech-questions-card {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechQuestionsFloat 5s ease-in-out infinite;
}

.ullmatech-questions-card--right-top {
  animation-delay: -1.2s;
}

.ullmatech-questions-card--left-bottom {
  animation-delay: -2.4s;
}

.ullmatech-questions-card--right-bottom {
  animation-delay: -3.6s;
}

/* Search field pulses */

.ullmatech-questions-search {
  animation: ullmatechQuestionsSearch 3s ease-in-out infinite;
}

/* Lightbulb */

.ullmatech-questions-bulb {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechQuestionsBulb 3s ease-in-out infinite;
}

/* Connections */

.ullmatech-questions-connections path {
  animation: ullmatechQuestionsConnections 3s ease-in-out infinite;
}

.ullmatech-questions-connections path:nth-child(2) {
  animation-delay: -0.75s;
}

.ullmatech-questions-connections path:nth-child(3) {
  animation-delay: -1.5s;
}

.ullmatech-questions-connections path:nth-child(4) {
  animation-delay: -2.25s;
}

/* Question nodes */

.ullmatech-questions-nodes circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechQuestionsNode 2.8s ease-in-out infinite;
}

.ullmatech-questions-nodes circle:nth-child(2) {
  animation-delay: -0.7s;
}

.ullmatech-questions-nodes circle:nth-child(3) {
  animation-delay: -1.4s;
}

.ullmatech-questions-nodes circle:nth-child(4) {
  animation-delay: -2.1s;
}

/* FAQ rows subtly illuminate */

.ullmatech-questions-row {
  animation: ullmatechQuestionsRow 4s ease-in-out infinite;
}

.ullmatech-questions-row--two {
  animation-delay: -1s;
}

.ullmatech-questions-row--three {
  animation-delay: -2s;
}

.ullmatech-questions-row--four {
  animation-delay: -3s;
}

/* =====================================================
   Keyframes
   ===================================================== */

@keyframes ullmatechQuestionsOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes ullmatechQuestionsFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes ullmatechQuestionsSearch {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.25);
  }
}

@keyframes ullmatechQuestionsBulb {
  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes ullmatechQuestionsConnections {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.85;
  }
}

@keyframes ullmatechQuestionsNode {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

@keyframes ullmatechQuestionsRow {
  0%,
  100% {
    opacity: 0.75;
  }

  50% {
    opacity: 1;
  }
}

/* =====================================================
   Accessibility
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-questions-orbit,
  .ullmatech-questions-card,
  .ullmatech-questions-search,
  .ullmatech-questions-bulb,
  .ullmatech-questions-connections path,
  .ullmatech-questions-nodes circle,
  .ullmatech-questions-row {
    animation: none !important;
  }
}

/* =====================================================
   Chapter 06 - Questions Flow
   ===================================================== */

.questions-flow__route {
  fill: none !important;
  stroke: #353842 !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
}

.questions-flow__traveller {
  fill: #f51b5b !important;
  filter: drop-shadow(0 0 8px rgba(245, 27, 91, 0.6)) !important;
  animation: none !important;
  transform: none !important;
}

/* =====================================================
   Chapter 07 - User Experience
   ===================================================== */

.ullmatech-chapter-user-experience {
  display: block !important;
  width: 135% !important;
  max-width: 700px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Main interface */

.ullmatech-ux-interface > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-ux-interface > circle {
  fill: #777a83;
  stroke: none;
}

/* Progress */

.ullmatech-ux-progress-track {
  fill: #292c34 !important;
  stroke: none !important;
}

.ullmatech-ux-progress {
  fill: #f51b5b !important;
  stroke: none !important;
}

.ullmatech-ux-progress-node {
  fill: #f51b5b !important;
  stroke: #111217 !important;
  stroke-width: 2 !important;
}

/* Interface content */

.ullmatech-ux-content-image {
  fill: #292c34 !important;
  stroke: #4a4d57 !important;
  stroke-width: 1 !important;
}

.ullmatech-ux-interface
  > rect:not(:first-child):not(.ullmatech-ux-progress-track):not(
    .ullmatech-ux-progress
  ):not(.ullmatech-ux-content-image):not(.ullmatech-ux-cta):not(
    .ullmatech-ux-form
  ) {
  fill: #555963;
  stroke: none;
}

.ullmatech-ux-cta {
  fill: #f51b5b !important;
  stroke: none !important;
}

.ullmatech-ux-form {
  fill: #181a20 !important;
  stroke: #353842 !important;
  stroke-width: 1 !important;
}

.ullmatech-ux-form-icon {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 2 !important;
}

.ullmatech-ux-chevron {
  fill: none !important;
  stroke: #777a83 !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Floating cards */

.ullmatech-ux-card > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-ux-card
  > circle:not(.ullmatech-ux-pink-outline):not(.ullmatech-ux-pink-fill) {
  fill: #777a83;
  stroke: none;
}

.ullmatech-ux-card > rect:not(:first-child) {
  fill: #555963;
  stroke: none;
}

/* Pink elements */

.ullmatech-ux-pink-outline {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
}

.ullmatech-ux-pink-line {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ullmatech-ux-pink-fill {
  fill: #f51b5b !important;
  stroke: none !important;
}

/* Connections */

.ullmatech-ux-connections path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  stroke-dasharray: 6 8;
  opacity: 0.55;
}

/* Orbit */

.ullmatech-ux-orbit {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 1.5;
  opacity: 0.18;
  stroke-dasharray: 4 9;
}

/* Nodes */

.ullmatech-ux-nodes circle {
  fill: #f51b5b;
}

/* =====================================================
   Animation
   ===================================================== */

.ullmatech-ux-orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechUXOrbit 16s linear infinite;
}

.ullmatech-ux-orbit--inner {
  animation-direction: reverse;
  animation-duration: 11s;
}

.ullmatech-ux-card {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechUXFloat 5s ease-in-out infinite;
}

.ullmatech-ux-card--right {
  animation-delay: -1.5s;
}

.ullmatech-ux-card--feedback {
  animation-delay: -2.5s;
}

.ullmatech-ux-card--support {
  animation-delay: -3.5s;
}

.ullmatech-ux-progress {
  transform-origin: left center;
  animation: ullmatechUXProgress 4s ease-in-out infinite;
}

.ullmatech-ux-progress-node {
  animation: ullmatechUXNode 2.8s ease-in-out infinite;
}

.ullmatech-ux-connections path {
  animation: ullmatechUXConnections 3s ease-in-out infinite;
}

.ullmatech-ux-connections path:nth-child(2) {
  animation-delay: -0.75s;
}

.ullmatech-ux-connections path:nth-child(3) {
  animation-delay: -1.5s;
}

.ullmatech-ux-connections path:nth-child(4) {
  animation-delay: -2.25s;
}

.ullmatech-ux-nodes circle {
  animation: ullmatechUXNode 2.8s ease-in-out infinite;
}

.ullmatech-ux-nodes circle:nth-child(2) {
  animation-delay: -0.7s;
}

.ullmatech-ux-nodes circle:nth-child(3) {
  animation-delay: -1.4s;
}

.ullmatech-ux-nodes circle:nth-child(4) {
  animation-delay: -2.1s;
}

.ullmatech-ux-cta {
  animation: ullmatechUXCTA 3s ease-in-out infinite;
}

/* =====================================================
   Keyframes
   ===================================================== */

@keyframes ullmatechUXOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes ullmatechUXFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes ullmatechUXProgress {
  0%,
  100% {
    transform: scaleX(0.85);
  }

  50% {
    transform: scaleX(1);
  }
}

@keyframes ullmatechUXNode {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

@keyframes ullmatechUXConnections {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.85;
  }
}

@keyframes ullmatechUXCTA {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* =====================================================
   Reduced motion
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-ux-orbit,
  .ullmatech-ux-card,
  .ullmatech-ux-progress,
  .ullmatech-ux-progress-node,
  .ullmatech-ux-connections path,
  .ullmatech-ux-nodes circle,
  .ullmatech-ux-cta {
    animation: none !important;
  }
}

/* =====================================================
   Chapter 08 - Speed
   ===================================================== */

.ullmatech-chapter-speed {
  display: block !important;
  width: 135% !important;
  max-width: 700px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Main browser */

.ullmatech-speed-browser > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-speed-browser > circle {
  fill: #777a83;
  stroke: none;
}

.ullmatech-speed-browser
  > rect:not(:first-child):not(.ullmatech-speed-progress-track):not(
    .ullmatech-speed-progress
  ):not(.ullmatech-speed-image):not(.ullmatech-speed-cta) {
  fill: #555963;
  stroke: none;
}

.ullmatech-speed-image {
  fill: #292c34 !important;
  stroke: #4a4d57 !important;
  stroke-width: 1 !important;
}

/* Loading progress */

.ullmatech-speed-progress-track {
  fill: #292c34 !important;
  stroke: none !important;
}

.ullmatech-speed-progress {
  fill: #f51b5b !important;
  stroke: none !important;
  transform-box: fill-box;
  transform-origin: left center;
}

/* CTA */

.ullmatech-speed-cta {
  fill: #f51b5b !important;
  stroke: none !important;
}

/* Speed trails */

.ullmatech-speed-trails path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.35;
  stroke-dasharray: 35 55;
  animation: ullmatechSpeedTrails 2.2s linear infinite;
}

.ullmatech-speed-trails path:nth-child(2) {
  animation-delay: -0.4s;
}

.ullmatech-speed-trails path:nth-child(3) {
  animation-delay: -0.8s;
}

.ullmatech-speed-trails path:nth-child(4) {
  animation-delay: -1.2s;
}

.ullmatech-speed-trails path:nth-child(5) {
  animation-delay: -1.6s;
}

.ullmatech-speed-trails path:nth-child(6) {
  animation-delay: -2s;
}

/* Lightning bolt */

.ullmatech-speed-bolt-ring {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  opacity: 0.25;
}

.ullmatech-speed-bolt-shape {
  fill: #f51b5b;
  stroke: none;
  filter: drop-shadow(0 0 7px rgba(245, 27, 91, 0.45));
}

/* Stopwatch */

.ullmatech-speed-stopwatch-ring {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-speed-stopwatch-top {
  fill: #f51b5b;
  stroke: none;
}

.ullmatech-speed-stopwatch-hand {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
}

/* Slow / fast cards */

.ullmatech-speed-card > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-speed-card
  > circle:not(.ullmatech-speed-warning-ring):not(.ullmatech-speed-check-ring) {
  fill: #777a83;
  stroke: none;
}

.ullmatech-speed-warning-ring,
.ullmatech-speed-check-ring {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
}

.ullmatech-speed-warning-line {
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
}

.ullmatech-speed-check {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ullmatech-speed-pink-fill {
  fill: #f51b5b !important;
  stroke: none !important;
}

/* Speedometer */

.ullmatech-speedometer-arc {
  fill: none;
  stroke: #4a4d57;
  stroke-width: 5;
  stroke-linecap: round;
}

.ullmatech-speedometer-arc--inner {
  stroke: #f51b5b;
  opacity: 0.65;
  stroke-width: 3;
}

.ullmatech-speedometer-needle {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 4;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: left center;
  animation: ullmatechSpeedNeedle 2.8s ease-in-out infinite;
}

.ullmatech-speedometer-centre {
  fill: #f51b5b;
  stroke: none;
}

/* Moving nodes */

.ullmatech-speed-nodes circle {
  fill: #f51b5b;
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechSpeedNode 2.4s ease-in-out infinite;
}

.ullmatech-speed-nodes circle:nth-child(2) {
  animation-delay: -0.6s;
}

.ullmatech-speed-nodes circle:nth-child(3) {
  animation-delay: -1.2s;
}

.ullmatech-speed-nodes circle:nth-child(4) {
  animation-delay: -1.8s;
}

/* =====================================================
   Animation
   ===================================================== */

.ullmatech-speed-browser {
  animation: ullmatechSpeedBrowser 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ullmatech-speed-progress {
  animation: ullmatechSpeedProgress 2.6s ease-in-out infinite;
}

.ullmatech-speed-bolt-shape {
  animation: ullmatechSpeedBolt 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ullmatech-speed-bolt-ring {
  animation: ullmatechSpeedRing 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ullmatech-speed-stopwatch {
  animation: ullmatechSpeedStopwatch 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ullmatech-speed-card {
  animation: ullmatechSpeedFloat 5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.ullmatech-speed-card--fast {
  animation-delay: -2s;
}

/* =====================================================
   Keyframes
   ===================================================== */

@keyframes ullmatechSpeedTrails {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -90;
  }
}

@keyframes ullmatechSpeedBrowser {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}

@keyframes ullmatechSpeedProgress {
  0%,
  100% {
    transform: scaleX(0.55);
  }

  50% {
    transform: scaleX(1);
  }
}

@keyframes ullmatechSpeedBolt {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes ullmatechSpeedRing {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

@keyframes ullmatechSpeedStopwatch {
  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(3deg);
  }
}

@keyframes ullmatechSpeedFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes ullmatechSpeedNeedle {
  0%,
  100% {
    transform: rotate(-18deg);
  }

  50% {
    transform: rotate(12deg);
  }
}

@keyframes ullmatechSpeedNode {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* =====================================================
   Reduced motion
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-speed-trails path,
  .ullmatech-speed-browser,
  .ullmatech-speed-progress,
  .ullmatech-speed-bolt-shape,
  .ullmatech-speed-bolt-ring,
  .ullmatech-speed-stopwatch,
  .ullmatech-speed-card,
  .ullmatech-speedometer-needle,
  .ullmatech-speed-nodes circle {
    animation: none !important;
  }
}

/* =====================================================
   Chapter 09 - WEBSITE AS A PLATFORM
   Clean static website platform illustration.
   ===================================================== */

.ullmatech-header-09 {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
}

.ullmatech-header-09 svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ullmatech-header-09 text {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1.5px;
}

/* =====================================================
   Website
   ===================================================== */

.platform09-shell {
  fill: #111217;
  stroke: #353842;
  stroke-width: 2;
}

.platform09-topbar {
  fill: #1a1b21;
  stroke: #353842;
  stroke-width: 1.5;
}

.platform09-topbar-cut {
  fill: #1a1b21;
}

.platform09-dashboard > circle {
  fill: #777a83;
  opacity: 0.65;
}

.platform09-url {
  fill: #777a83;
  font-size: 8px;
}

/* =====================================================
   Cards
   ===================================================== */

.platform09-card > rect:first-child {
  fill: #17181e;
  stroke: #353842;
  stroke-width: 1.5;
  transition:
    fill 0.25s ease,
    stroke 0.25s ease,
    filter 0.25s ease;
}

.platform09-card text {
  fill: #777a83;
  font-size: 8px;
}

/* Active card */

.platform09-card.is-active > rect:first-child {
  fill: #20222a;
  stroke: #f51b5b;
  stroke-width: 2;
  filter: drop-shadow(0 0 7px rgba(245, 27, 91, 0.22));
}

.platform09-card.is-active text {
  fill: #e8e9ec;
}

.platform09-card.is-active .platform09-line {
  opacity: 0.75;
}

.platform09-card.is-active .platform09-image {
  opacity: 0.9;
}

.platform09-card.is-active .platform09-image.second {
  opacity: 0.5;
}

.platform09-card.is-active .platform09-message.active {
  opacity: 1;
}

/* =====================================================
   Content
   ===================================================== */

.platform09-line {
  fill: #777a83;
  opacity: 0.42;
}

.platform09-line.short {
  opacity: 0.25;
}

.platform09-image {
  fill: #f51b5b;
  opacity: 0.55;
}

.platform09-image.second {
  opacity: 0.22;
}

/* =====================================================
   Tools
   ===================================================== */

.platform09-tool {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  opacity: 0.85;
}

.platform09-tools path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================
   Enquiries
   ===================================================== */

.platform09-message {
  fill: #353842;
}

.platform09-message.active {
  fill: #f51b5b;
  opacity: 0.7;
}

.platform09-notification {
  fill: #f51b5b;
  filter: drop-shadow(0 0 6px rgba(245, 27, 91, 0.55));
}

/* =====================================================
   Conversion
   ===================================================== */

.platform09-chart {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 0;
}

.platform09-chart-dot {
  fill: #f51b5b;
  filter: drop-shadow(0 0 7px rgba(245, 27, 91, 0.6));
}

/* =====================================================
   Visitor / Enquiry
   ===================================================== */

.platform09-visitor circle,
.platform09-result circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 2.5;
}

.platform09-visitor path,
.platform09-result path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform09-visitor text,
.platform09-result text {
  fill: #777a83;
  font-size: 8px;
}

.platform09-result text {
  fill: #f51b5b;
}

/* =====================================================
   Arrows
   ===================================================== */

.platform09-arrow path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform09-arrow-in,
.platform09-arrow-out {
  opacity: 0.8;
}

/* =====================================================
   Mobile
   ===================================================== */

@media (max-width: 700px) {
  .ullmatech-header-09 {
    max-width: 100%;
  }
}

/* =====================================================
   Reduced motion
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-header-09 * {
    animation: none !important;
    transition: none !important;
  }

  .platform09-card.is-active > rect:first-child {
    fill: #20222a;
    stroke: #f51b5b;
  }
}

/* =====================================================
   Chapter 09 - Kill all legacy moving balls
   ===================================================== */

.ullmatech-header-09 .platform09-network,
.ullmatech-header-09 .platform09-pulse,
.ullmatech-header-09 .platform09-traveller,
.ullmatech-header-09 #platform09BallRoute {
  display: none !important;
}

.ullmatech-header-09 .platform09-network *,
.ullmatech-header-09 .platform09-pulse *,
.ullmatech-header-09 .platform09-traveller * {
  display: none !important;
  animation: none !important;
  transform: none !important;
}

/* =====================================================
   Chapter 10 - Conversion
   ===================================================== */

.ullmatech-chapter-conversion {
  display: block !important;
  width: 135% !important;
  max-width: 700px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Orbit */

.ullmatech-conversion-orbit {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 1.5;
  opacity: 0.2;
  stroke-dasharray: 4 9;
}

.ullmatech-conversion-orbit--inner {
  opacity: 0.12;
  stroke-dasharray: 3 8;
}

/* Dashboard */

.ullmatech-conversion-dashboard > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-conversion-dashboard > circle {
  fill: #777a83;
  stroke: none;
}

/* Funnel */

.ullmatech-conversion-funnel {
  fill: #292c34;
  stroke: #4a4d57;
  stroke-width: 1;
}

.ullmatech-conversion-funnel--middle {
  fill: #353842;
}

.ullmatech-conversion-funnel--bottom {
  fill: #f51b5b;
  stroke: none;
}

/* Conversion result */

.ullmatech-conversion-pulse {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-conversion-check {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ullmatech-conversion-result-track {
  fill: #292c34;
  stroke: none;
}

.ullmatech-conversion-result {
  fill: #f51b5b;
  stroke: none;
}

/* Visitor */

.ullmatech-conversion-person {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-conversion-limb {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 4;
  stroke-linecap: round;
}

.ullmatech-conversion-arrow {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Floating cards */

.ullmatech-conversion-card > rect:first-child,
.ullmatech-conversion-growth > rect:first-child {
  fill: #111217;
  stroke: #4a4d57;
  stroke-width: 2;
}

.ullmatech-conversion-card
  > circle:not(.ullmatech-conversion-pink-outline):not(
    .ullmatech-conversion-result-ring
  ) {
  fill: #777a83;
  stroke: none;
}

.ullmatech-conversion-card > rect:not(:first-child) {
  fill: #555963;
  stroke: none;
}

/* Pink elements */

.ullmatech-conversion-pink-outline,
.ullmatech-conversion-result-ring {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
}

.ullmatech-conversion-pink-line,
.ullmatech-conversion-result-check {
  fill: none !important;
  stroke: #f51b5b !important;
  stroke-width: 3 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ullmatech-conversion-pink-fill {
  fill: #f51b5b !important;
  stroke: none !important;
}

/* Message */

.ullmatech-conversion-message {
  fill: #171820;
  stroke: #f51b5b;
  stroke-width: 2;
}

/* Growth chart */

.ullmatech-conversion-growth > circle {
  fill: #777a83;
  stroke: none;
}

.ullmatech-conversion-growth-line {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Connections */

.ullmatech-conversion-connections path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  stroke-dasharray: 6 8;
  opacity: 0.55;
}

/* Nodes */

.ullmatech-conversion-nodes circle {
  fill: #f51b5b;
}

/* =====================================================
   Animation
   ===================================================== */

.ullmatech-conversion-orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechConversionOrbit 16s linear infinite;
}

.ullmatech-conversion-orbit--inner {
  animation-direction: reverse;
  animation-duration: 11s;
}

.ullmatech-conversion-funnel {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechConversionFunnel 3.5s ease-in-out infinite;
}

.ullmatech-conversion-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechConversionPulse 2.8s ease-in-out infinite;
}

.ullmatech-conversion-check {
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
  animation: ullmatechConversionCheck 3s ease-in-out infinite;
}

.ullmatech-conversion-result {
  transform-box: fill-box;
  transform-origin: left center;
  animation: ullmatechConversionResult 3.5s ease-in-out infinite;
}

.ullmatech-conversion-visitor {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechConversionVisitor 4s ease-in-out infinite;
}

.ullmatech-conversion-card,
.ullmatech-conversion-growth {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechConversionFloat 5s ease-in-out infinite;
}

.ullmatech-conversion-card--result {
  animation-delay: -1.2s;
}

.ullmatech-conversion-card--lead {
  animation-delay: -2.4s;
}

.ullmatech-conversion-growth {
  animation-delay: -3.6s;
}

.ullmatech-conversion-connections path {
  animation: ullmatechConversionConnections 3s ease-in-out infinite;
}

.ullmatech-conversion-connections path:nth-child(2) {
  animation-delay: -0.75s;
}

.ullmatech-conversion-connections path:nth-child(3) {
  animation-delay: -1.5s;
}

.ullmatech-conversion-connections path:nth-child(4) {
  animation-delay: -2.25s;
}

.ullmatech-conversion-nodes circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: ullmatechConversionNode 2.8s ease-in-out infinite;
}

.ullmatech-conversion-nodes circle:nth-child(2) {
  animation-delay: -0.7s;
}

.ullmatech-conversion-nodes circle:nth-child(3) {
  animation-delay: -1.4s;
}

.ullmatech-conversion-nodes circle:nth-child(4) {
  animation-delay: -2.1s;
}

/* =====================================================
   Keyframes
   ===================================================== */

@keyframes ullmatechConversionOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes ullmatechConversionFunnel {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes ullmatechConversionPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes ullmatechConversionCheck {
  0%,
  25% {
    stroke-dashoffset: 45;
    opacity: 0.2;
  }

  55%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes ullmatechConversionResult {
  0%,
  100% {
    transform: scaleX(0.65);
  }

  50% {
    transform: scaleX(1);
  }
}

@keyframes ullmatechConversionVisitor {
  0%,
  100% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(8px);
  }
}

@keyframes ullmatechConversionFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes ullmatechConversionConnections {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.85;
  }
}

@keyframes ullmatechConversionNode {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* =====================================================
   Reduced motion
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-conversion-orbit,
  .ullmatech-conversion-funnel,
  .ullmatech-conversion-pulse,
  .ullmatech-conversion-check,
  .ullmatech-conversion-result,
  .ullmatech-conversion-visitor,
  .ullmatech-conversion-card,
  .ullmatech-conversion-growth,
  .ullmatech-conversion-connections path,
  .ullmatech-conversion-nodes circle {
    animation: none !important;
  }
}

/* Chapters 05–10 redesigned header illustrations */
.ullmatech-header-05,
.ullmatech-header-06,
.ullmatech-header-07,
.ullmatech-header-08,
.ullmatech-header-09,
.ullmatech-header-10 {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ullmatech-header-05 text,
.ullmatech-header-06 text,
.ullmatech-header-07 text,
.ullmatech-header-08 text,
.ullmatech-header-09 text,
.ullmatech-header-10 text {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  fill: #777a83;
}
/* 05 */
.trust-foundation__block {
  fill: #171920;
  stroke: #353842;
  stroke-width: 2;
  animation: trustBuild 5s ease-in-out infinite;
}
.trust-foundation__block--foundation {
  stroke: #4a4d57;
}
.trust-foundation__block:nth-child(2) {
  animation-delay: -0.7s;
}
.trust-foundation__block:nth-child(3) {
  animation-delay: -1.4s;
}
.trust-foundation__evidence circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}
.trust-foundation__evidence polyline {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-foundation__signal circle {
  fill: #f51b5b;
}
.trust-foundation__signal line,
.trust-foundation__signal polyline {
  stroke: #f51b5b;
  stroke-width: 2;
  fill: none;
}
@keyframes trustBuild {
  0%,
  15% {
    transform: translateY(9px);
    opacity: 0.45;
  }
  35%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 06 */
.questions-conversation__bubble path {
  fill: #171920;
  stroke: #353842;
  stroke-width: 2;
}
.questions-conversation__bubble text {
  fill: #e8e9ec;
}
.questions-conversation__bubble--two path,
.questions-conversation__bubble--three path {
  stroke: rgba(245, 27, 91, 0.45);
}
.questions-conversation__signal circle {
  fill: #f51b5b;
}
.questions-conversation__bubble--one {
  animation: convOne 6s ease-in-out infinite;
}
.questions-conversation__bubble--two {
  animation: convTwo 6s ease-in-out infinite -0.9s;
}
.questions-conversation__bubble--three {
  animation: convOne 6s ease-in-out infinite -1.8s;
}
@keyframes convOne {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.7;
  }
  50% {
    transform: translateX(4px);
    opacity: 1;
  }
}
@keyframes convTwo {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-4px);
    opacity: 1;
  }
}
/* 07 */
.experience-maze__maze path {
  fill: none;
  stroke: #353842;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.experience-maze__clear-route {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-dasharray: 10 12;
  stroke-linecap: round;
  animation: mazeRoute 2.5s linear infinite;
}
.experience-maze__traveller {
  fill: #f51b5b;
  animation: mazeTraveller 5s ease-in-out infinite;
}
.experience-maze__finish circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}
.experience-maze__finish polyline {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.experience-maze__finish text {
  fill: #f51b5b;
}
@keyframes mazeRoute {
  to {
    stroke-dashoffset: -44;
  }
}
@keyframes mazeTraveller {
  0%,
  10% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(165px, -65px);
  }
  70% {
    transform: translate(280px, 0);
  }
  100% {
    transform: translate(420px, 0);
  }
}
/* 08 */
.speed-race__track line {
  stroke: #353842;
  stroke-width: 3;
  stroke-linecap: round;
}
.speed-race__track--useful text {
  fill: #f51b5b;
}
.speed-race__runner {
  fill: #f51b5b;
}
.speed-race__runner--fast {
  animation: raceFast 2.4s ease-in-out infinite;
}
.speed-race__runner--useful {
  animation: raceUseful 3.2s ease-in-out infinite;
}
.speed-race__finish circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}
.speed-race__finish polyline {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.speed-race__finish text {
  fill: #f51b5b;
}
@keyframes raceFast {
  0%,
  15% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(390px);
  }
}
@keyframes raceUseful {
  0%,
  20% {
    transform: translateX(0);
  }
  75%,
  100% {
    transform: translateX(390px);
  }
}
/* 09 */
.brochure-toolbox__brochure rect {
  fill: #171920;
  stroke: #353842;
  stroke-width: 2;
}
.brochure-toolbox__brochure line {
  stroke: #555963;
  stroke-width: 5;
  stroke-linecap: round;
}
.brochure-toolbox__tools rect {
  fill: #171920;
  stroke: rgba(245, 27, 91, 0.55);
  stroke-width: 2;
}
.brochure-toolbox__tools text {
  fill: #e8e9ec;
  font-size: 9px;
}
.brochure-toolbox__arrow,
.brochure-toolbox__arrow-head {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brochure-toolbox__signal {
  fill: #f51b5b;
  animation: toolSignal 2.8s ease-in-out infinite;
}
@keyframes toolSignal {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(42px);
    opacity: 1;
  }
}
/* 10 */
.conversion-target__rings circle {
  fill: none;
  stroke: #353842;
  stroke-width: 2;
}
.conversion-target__rings circle:nth-child(2) {
  stroke: #4a4d57;
}
.conversion-target__rings circle:nth-child(3) {
  stroke: rgba(245, 27, 91, 0.45);
}
.conversion-target__bullseye {
  fill: #f51b5b;
  stroke: #f51b5b;
}
.conversion-target__labels text {
  fill: #777a83;
}
.conversion-target__traveller {
  fill: #f51b5b;
  animation: targetTravel 4s ease-in-out infinite;
}
.conversion-target__arrow {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  stroke-linecap: round;
  animation: targetArrow 4s ease-in-out infinite;
}
.conversion-target__celebrate circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
  opacity: 0;
  animation: targetCelebrate 4s ease-in-out infinite;
}
.conversion-target__celebrate polyline {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: targetCheck 4s ease-in-out infinite;
}
@keyframes targetTravel {
  0%,
  15% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(130px);
  }
}
@keyframes targetArrow {
  0%,
  65% {
    opacity: 0.3;
    transform: translateX(0);
  }
  80%,
  100% {
    opacity: 1;
    transform: translateX(100px);
  }
}
@keyframes targetCelebrate {
  0%,
  72% {
    opacity: 0;
    transform: scale(0.7);
  }
  82%,
  100% {
    opacity: 1;
    transform: scale(1.12);
  }
}
@keyframes targetCheck {
  0%,
  72% {
    stroke-dashoffset: 48;
    opacity: 0;
  }
  82% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@media (max-width: 700px) {
  .ullmatech-header-05,
  .ullmatech-header-06,
  .ullmatech-header-07,
  .ullmatech-header-08,
  .ullmatech-header-09,
  .ullmatech-header-10 {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ullmatech-header-05 *,
  .ullmatech-header-06 *,
  .ullmatech-header-07 *,
  .ullmatech-header-08 *,
  .ullmatech-header-09 *,
  .ullmatech-header-10 * {
    animation: none !important;
  }
}

/* =====================================================
   Chapter 05 - Trust
   Synchronized horizontal evidence trail
   ===================================================== */

.ullmatech-trust-trail {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ullmatech-trust-trail text {
  font-family: inherit;
  font-weight: 700;
}

/* Main route */

.ullmatech-trust-trail .trust-trail__line {
  fill: none;
  stroke: #353842;
  stroke-width: 3;
  stroke-linecap: round;
}

.ullmatech-trust-trail .trust-trail__traveller {
  fill: #f51b5b;
  filter: drop-shadow(0 0 8px rgba(245, 27, 91, 0.65));
  animation: ullmatechTrustTraveller 5.5s linear infinite;
}

/* Nodes */

.ullmatech-trust-trail .trust-trail__node {
  fill: #171920;
  stroke: #4a4d57;
  stroke-width: 3;
}

.ullmatech-trust-trail .trust-trail__number {
  fill: #e8e9ec;
  font-size: 11px;
}

.ullmatech-trust-trail .trust-trail__label {
  fill: #f51b5b;
  font-size: 12px;
  letter-spacing: 1.5px;
}

.ullmatech-trust-trail .trust-trail__node--final {
  stroke: #f51b5b;
  stroke-width: 3;
}

.ullmatech-trust-trail .trust-trail__label--final {
  font-weight: 700;
}

.ullmatech-trust-trail .trust-trail__check {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 55;
  stroke-dashoffset: 55;
  animation: ullmatechTrustCheck 5.5s linear infinite;
}

/* Evidence markers */

.ullmatech-trust-trail .trust-trail__evidence path {
  fill: none;
  stroke: #353842;
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

/*
   Each node uses the SAME 5.5 second clock as the traveller.

   Traveller positions:
   01 = 105
   02 = 215
   03 = 325
   04 = 435

   The node becomes active only while the traveller is over it.
*/

.ullmatech-trust-trail .trust-trail__stage {
  animation: ullmatechTrustStage 5.5s linear infinite;
}

.ullmatech-trust-trail .trust-trail__stage--two {
  animation-delay: -1.38s;
}

.ullmatech-trust-trail .trust-trail__stage--three {
  animation-delay: -2.75s;
}

.ullmatech-trust-trail .trust-trail__stage--four {
  animation-delay: -4.13s;
}

/* Stage movement is subtle; the border illumination is the main event. */

@keyframes ullmatechTrustStage {
  0%,
  4% {
    transform: translateY(0);
  }

  5%,
  13% {
    transform: translateY(-3px);
  }

  14%,
  100% {
    transform: translateY(0);
  }
}

/*
   Traveller:
   starts before Proof, crosses Proof, Results, Experience,
   then reaches Trusted.
*/

@keyframes ullmatechTrustTraveller {
  0%,
  7% {
    transform: translateX(0);
    opacity: 0.25;
  }

  25% {
    transform: translateX(60px);
    opacity: 1;
  }

  42% {
    transform: translateX(170px);
    opacity: 1;
  }

  59% {
    transform: translateX(280px);
    opacity: 1;
  }

  76%,
  88% {
    transform: translateX(390px);
    opacity: 1;
  }

  100% {
    transform: translateX(400px);
    opacity: 0.9;
  }
}

/*
   Node highlight follows the same sequence.
   Completed nodes stay lit after the traveller passes,
   creating an accumulating "trust built" effect.
*/

.ullmatech-trust-trail .trust-trail__stage--one .trust-trail__node {
  animation: ullmatechTrustNodeOne 5.5s linear infinite;
}

.ullmatech-trust-trail .trust-trail__stage--two .trust-trail__node {
  animation: ullmatechTrustNodeTwo 5.5s linear infinite;
}

.ullmatech-trust-trail .trust-trail__stage--three .trust-trail__node {
  animation: ullmatechTrustNodeThree 5.5s linear infinite;
}

.ullmatech-trust-trail .trust-trail__stage--four .trust-trail__node {
  animation: ullmatechTrustNodeFour 5.5s linear infinite;
}

@keyframes ullmatechTrustNodeOne {
  0%,
  17% {
    stroke: #4a4d57;
    filter: none;
  }

  18%,
  100% {
    stroke: #f51b5b;
    filter: drop-shadow(0 0 8px rgba(245, 27, 91, 0.35));
  }
}

@keyframes ullmatechTrustNodeTwo {
  0%,
  38% {
    stroke: #4a4d57;
    filter: none;
  }

  39%,
  100% {
    stroke: #f51b5b;
    filter: drop-shadow(0 0 8px rgba(245, 27, 91, 0.35));
  }
}

@keyframes ullmatechTrustNodeThree {
  0%,
  55% {
    stroke: #4a4d57;
    filter: none;
  }

  56%,
  100% {
    stroke: #f51b5b;
    filter: drop-shadow(0 0 8px rgba(245, 27, 91, 0.35));
  }
}

@keyframes ullmatechTrustNodeFour {
  0%,
  73% {
    stroke: #f51b5b;
    filter: none;
  }

  74%,
  100% {
    stroke: #f51b5b;
    filter: drop-shadow(0 0 12px rgba(245, 27, 91, 0.5));
  }
}

/* Final tick appears when the traveller reaches Trusted. */

@keyframes ullmatechTrustCheck {
  0%,
  70% {
    stroke-dashoffset: 55;
    opacity: 0;
  }

  76% {
    stroke-dashoffset: 55;
    opacity: 1;
  }

  88%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Mobile */

@media (max-width: 700px) {
  .ullmatech-trust-trail {
    width: 100%;
  }

  .ullmatech-trust-trail .trust-trail__label {
    font-size: 10px;
  }

  .ullmatech-trust-trail .trust-trail__number {
    font-size: 10px;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ullmatech-trust-trail .trust-trail__traveller,
  .ullmatech-trust-trail .trust-trail__stage,
  .ullmatech-trust-trail .trust-trail__node,
  .ullmatech-trust-trail .trust-trail__check {
    animation: none !important;
  }
}

=====================================================
  Chapter
  06
  -
  Questions
  =====================================================
  */
  .ullmatech-header-06 {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ullmatech-header-06 text {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1.2px;
}
.ullmatech-header-06 .questions-flow__route {
  fill: none;
  stroke: #353842;
  stroke-width: 3;
  stroke-linecap: round;
}
.ullmatech-header-06 .questions-flow__traveller {
  fill: #f51b5b;
  filter: drop-shadow(0 0 8px rgba(245, 27, 91, 0.6));
  animation: questionsTravel 6s ease-in-out infinite;
}
.ullmatech-header-06 .questions-flow__bubble path {
  fill: #171920;
  stroke: #4a4d57;
  stroke-width: 2;
}
.ullmatech-header-06 .questions-flow__bubble--answer path {
  stroke: rgba(245, 27, 91, 0.55);
}
.ullmatech-header-06 .questions-flow__bubble text {
  fill: #f51b5b;
  font-size: 9px;
}
.ullmatech-header-06 .questions-flow__bubble .questions-flow__quote {
  fill: #e8e9ec;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}
.ullmatech-header-06 .questions-flow__content rect:first-child {
  fill: #171920;
  stroke: rgba(245, 27, 91, 0.55);
  stroke-width: 2;
}
.ullmatech-header-06 .questions-flow__content line {
  stroke: #555963;
  stroke-width: 5;
  stroke-linecap: round;
}
.ullmatech-header-06 .questions-flow__content rect:last-of-type {
  fill: #f51b5b;
}
.ullmatech-header-06 .questions-flow__content text {
  fill: #f51b5b;
  font-size: 8px;
}
.ullmatech-header-06 .questions-flow__check circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}
.ullmatech-header-06 .questions-flow__check polyline {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 45;
  stroke-dashoffset: 45;
  animation: questionsCheck 6s ease-in-out infinite;
}
.ullmatech-header-06 .questions-flow__bubble--question {
  animation: questionsQuestion 6s ease-in-out infinite;
}
.ullmatech-header-06 .questions-flow__bubble--answer {
  animation: questionsAnswer 6s ease-in-out infinite;
}
.ullmatech-header-06 .questions-flow__content {
  animation: questionsContent 6s ease-in-out infinite;
}
@keyframes questionsTravel {
  0%,
  8% {
    transform: translate(0, 0);
    opacity: 0.2;
  }
  30% {
    transform: translate(145px, -85px);
    opacity: 1;
  }
  55% {
    transform: translate(295px, 85px);
    opacity: 1;
  }
  78% {
    transform: translate(425px, 0);
    opacity: 1;
  }
  90%,
  100% {
    transform: translate(450px, 0);
    opacity: 1;
  }
}
@keyframes questionsQuestion {
  0%,
  20% {
    transform: translateX(-4px);
    opacity: 0.65;
  }
  35%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes questionsAnswer {
  0%,
  40% {
    transform: translateX(5px);
    opacity: 0.55;
  }
  60%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes questionsContent {
  0%,
  58% {
    transform: translateY(5px);
    opacity: 0.45;
  }
  75%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes questionsCheck {
  0%,
  75% {
    stroke-dashoffset: 45;
    opacity: 0;
  }
  82% {
    stroke-dashoffset: 45;
    opacity: 1;
  }
  92%,
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
@media (max-width: 700px) {
  .ullmatech-header-06 .questions-flow__quote {
    font-size: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ullmatech-header-06 .questions-flow__traveller,
  .ullmatech-header-06 .questions-flow__bubble--question,
  .ullmatech-header-06 .questions-flow__bubble--answer,
  .ullmatech-header-06 .questions-flow__content,
  .ullmatech-header-06 .questions-flow__check polyline {
    animation: none !important;
  }
}

/* Chapter 07 - ball arrival + held tick */
.ullmatech-header-07 {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ullmatech-header-07 text {
  font-family: inherit;
  font-weight: 700;
}

.ullmatech-header-07 .ux-maze__maze path {
  fill: none;
  stroke: #353842;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ullmatech-header-07 .ux-maze__clear-route {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  filter: drop-shadow(0 0 5px rgba(245, 27, 91, 0.25));
  animation: uxMazeRoute 2.6s linear infinite;
}

.ullmatech-header-07 .ux-maze__traveller {
  fill: #f51b5b;
  filter: drop-shadow(0 0 8px rgba(245, 27, 91, 0.6));
  /* SVG animateMotion controls the ball position. */
}

.ullmatech-header-07 .ux-maze__label {
  fill: #777a83;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.ullmatech-header-07 .ux-maze__label--final {
  fill: #f51b5b;
}

.ullmatech-header-07 .ux-maze__destination circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 3;
}

/* Tick starts hidden. JavaScript reveals it when the ball's SMIL motion
   reaches the end of its cycle, then keeps it highlighted for 1.7 seconds. */
.ullmatech-header-07 .ux-maze__check {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  opacity: 0;
}

.ullmatech-header-07 .ux-maze__check--visible {
  animation: uxMazeCheckIn 0.45s ease-out forwards;
}

@keyframes uxMazeRoute {
  to {
    stroke-dashoffset: -44;
  }
}

@keyframes uxMazeCheckIn {
  from {
    stroke-dashoffset: 50;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@media (max-width: 700px) {
  .ullmatech-header-07 {
    width: 100%;
  }
  .ullmatech-header-07 .ux-maze__label {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ullmatech-header-07 .ux-maze__clear-route,
  .ullmatech-header-07 .ux-maze__check--visible {
    animation: none !important;
  }

  .ullmatech-header-07 .ux-maze__check--visible {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Chapter 08 - SPEED
   Reusable HTML/CSS visual. Designed to sit immediately after
   “Let’s talk about speed” in the Chapter Header experience. */
.ullmatech-header-08 {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
}

.ullmatech-header-08 svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ullmatech-header-08 text {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.speed08-nodes circle {
  fill: #f51b5b;
  opacity: 0.28;
  animation: speed08Node 2.8s ease-in-out infinite;
}
.speed08-nodes circle:nth-child(2n) {
  animation-delay: 0.7s;
}
.speed08-nodes circle:nth-child(3n) {
  animation-delay: 1.3s;
}

.speed08-trails path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 22 18;
  opacity: 0.42;
  animation: speed08Trails 0.75s linear infinite;
}
.speed08-trails path:nth-child(2) {
  animation-delay: 0.12s;
  opacity: 0.28;
}
.speed08-trails path:nth-child(3) {
  animation-delay: 0.24s;
  opacity: 0.2;
}
.speed08-trails path:nth-child(4) {
  animation-delay: 0.06s;
}
.speed08-trails path:nth-child(5) {
  animation-delay: 0.18s;
  opacity: 0.28;
}
.speed08-trails path:nth-child(6) {
  animation-delay: 0.3s;
  opacity: 0.2;
}

.speed08-gauge-arc {
  fill: none;
  stroke: #353842;
  stroke-width: 18;
  stroke-linecap: round;
}
.speed08-gauge-inner {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 16 12;
  opacity: 0.8;
  animation: speed08Gauge 2.2s linear infinite;
}
.speed08-ticks path {
  fill: none;
  stroke: #777a83;
  stroke-width: 3;
  stroke-linecap: round;
}
.speed08-needle {
  stroke: #f51b5b;
  stroke-width: 5;
  stroke-linecap: round;
  transform-origin: 280px 285px;
  animation: speed08Needle 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(245, 27, 91, 0.4));
}
.speed08-hub {
  fill: #f51b5b;
}
.speed08-value {
  fill: #777a83;
  font-size: 10px;
}

.speed08-bolt path {
  fill: #f51b5b;
  filter: drop-shadow(0 0 8px rgba(245, 27, 91, 0.45));
  transform-origin: 282px 98px;
  animation: speed08Bolt 1.7s ease-in-out infinite;
}

.speed08-stopwatch circle,
.speed08-stopwatch path,
.speed08-stopwatch line {
  fill: none;
  stroke: #777a83;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.speed08-stopwatch circle:last-child {
  fill: #f51b5b;
  stroke: none;
}
.speed08-hand {
  transform-origin: 280px 105px;
  animation: speed08Clock 2.2s linear infinite;
}
.speed08-hand-second {
  animation-duration: 0.75s;
}

.speed08-loading > rect:first-child {
  fill: #353842;
}
.speed08-loading-fill {
  fill: url(#speed08Fade);
  animation: speed08Load 2.2s ease-in-out infinite;
}
.speed08-loading text {
  fill: #777a83;
  font-size: 9px;
}

.speed08-label text {
  font-size: 10px;
}
.speed08-slow text {
  fill: #777a83;
}
.speed08-fast text {
  fill: #f51b5b;
}
.speed08-slow circle {
  fill: #777a83;
  opacity: 0.5;
}
.speed08-fast circle {
  fill: #f51b5b;
  filter: drop-shadow(0 0 6px rgba(245, 27, 91, 0.55));
  animation: speed08Fast 1s ease-in-out infinite;
}

@keyframes speed08Trails {
  to {
    stroke-dashoffset: -40;
  }
}
@keyframes speed08Gauge {
  to {
    stroke-dashoffset: -56;
  }
}
@keyframes speed08Needle {
  0%,
  100% {
    transform: rotate(-28deg);
  }
  50% {
    transform: rotate(28deg);
  }
}
@keyframes speed08Bolt {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes speed08Clock {
  to {
    transform: rotate(360deg);
  }
}
@keyframes speed08Load {
  0% {
    width: 0;
  }
  70%,
  100% {
    width: 260px;
  }
}
@keyframes speed08Fast {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes speed08Node {
  0%,
  100% {
    opacity: 0.18;
  }
  50% {
    opacity: 0.75;
  }
}

@media (max-width: 700px) {
  .ullmatech-header-08 {
    max-width: 100%;
  }
  .speed08-trails path {
    stroke-width: 2.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ullmatech-header-08 * {
    animation: none !important;
  }
  .speed08-loading-fill {
    width: 260px;
  }
  .speed08-needle {
    transform: rotate(20deg);
  }
  .speed08-fast circle {
    opacity: 1;
  }
}

/* Chapter 09 - WEBSITE AS A PLATFORM
   Animated visual for: “Your website should do more than look good.” */
.ullmatech-header-09 {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
}

.ullmatech-header-09 svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ullmatech-header-09 text {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.platform09-network path {
  fill: none;
  stroke: #353842;
  stroke-width: 2;
  stroke-dasharray: 7 10;
  opacity: 0.55;
  animation: platform09Network 2.8s linear infinite;
}
.platform09-network circle {
  display: none;
}
.platform09-network circle:nth-of-type(2n) {
  animation-delay: 0.6s;
}
.platform09-network circle:nth-of-type(3n) {
  animation-delay: 1.2s;
}

.platform09-shell {
  fill: #111217;
  stroke: #353842;
  stroke-width: 2;
}
.platform09-topbar {
  fill: #1a1b21;
  stroke: #353842;
  stroke-width: 1.5;
}
.platform09-topbar-cut {
  fill: #1a1b21;
}
.platform09-dashboard > circle {
  fill: #777a83;
  opacity: 0.65;
}
.platform09-url {
  fill: #777a83;
  font-size: 8px;
}

.platform09-card > rect:first-child {
  fill: #17181e;
  stroke: #353842;
  stroke-width: 1.5;
}
.platform09-card text {
  fill: #777a83;
  font-size: 8px;
}
.platform09-line {
  fill: #777a83;
  opacity: 0.42;
}
.platform09-line.short {
  opacity: 0.25;
}
.platform09-image {
  fill: #f51b5b;
  opacity: 0.55;
}
.platform09-image.second {
  opacity: 0.22;
}

.platform09-tool {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  opacity: 0.85;
}
.platform09-tools path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.platform09-message {
  fill: #353842;
}
.platform09-message.active {
  fill: #f51b5b;
  opacity: 0.7;
  animation: platform09Message 1.8s ease-in-out infinite;
}
.platform09-notification {
  fill: #f51b5b;
  filter: drop-shadow(0 0 6px rgba(245, 27, 91, 0.55));
  animation: platform09Notification 1.5s ease-in-out infinite;
}

.platform09-chart {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  animation: platform09Chart 2.6s ease-in-out infinite;
}
.platform09-chart-dot {
  fill: #f51b5b;
  filter: drop-shadow(0 0 7px rgba(245, 27, 91, 0.6));
  animation: platform09Dot 2.6s ease-in-out infinite;
}

.platform09-visitor circle,
.platform09-result circle {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 2.5;
}
.platform09-visitor path,
.platform09-result path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.platform09-visitor text,
.platform09-result text {
  fill: #777a83;
  font-size: 8px;
}
.platform09-result text {
  fill: #f51b5b;
}

.platform09-arrow path {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.platform09-arrow-in {
  animation: platform09ArrowIn 2.4s ease-in-out infinite;
}
.platform09-arrow-out {
  animation: platform09ArrowOut 2.4s ease-in-out infinite;
}

@keyframes platform09Network {
  to {
    stroke-dashoffset: -34;
  }
}
@keyframes platform09Node {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.15);
  }
}
@keyframes platform09Message {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
@keyframes platform09Notification {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}
@keyframes platform09Chart {
  0%,
  20% {
    stroke-dashoffset: 150;
  }
  65%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes platform09Dot {
  0%,
  55% {
    opacity: 0.25;
    transform: scale(0.7);
  }
  70%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes platform09ArrowIn {
  0%,
  100% {
    opacity: 0.25;
    transform: translateX(0);
  }
  45%,
  65% {
    opacity: 1;
    transform: translateX(5px);
  }
}
@keyframes platform09ArrowOut {
  0%,
  100% {
    opacity: 0.25;
    transform: translateX(0);
  }
  55%,
  75% {
    opacity: 1;
    transform: translateX(5px);
  }
}

@media (max-width: 700px) {
  .ullmatech-header-09 {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ullmatech-header-09 * {
    animation: none !important;
  }
  .platform09-chart {
    stroke-dashoffset: 0;
  }
  .platform09-message.active,
  .platform09-notification,
  .platform09-chart-dot {
    opacity: 1;
  }
}

/* Chapter 10 - THE NEXT STEP
   One clear journey: visitor walks into the website, comes out the other side,
   then physically takes the next step. */
.ullmatech-header-10 {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  overflow: visible;
}
.ullmatech-header-10 svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ullmatech-header-10 text {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.next10-ground {
  stroke: #353842;
  stroke-width: 2;
  opacity: 0.7;
}
.next10-frame {
  fill: #111217;
  stroke: #353842;
  stroke-width: 2.5;
}
.next10-opening {
  fill: #17181e;
  stroke: #353842;
  stroke-width: 1.5;
}
.next10-light {
  fill: url(#next10LightV2);
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(245, 27, 91, 0.35));
}
.next10-door-label {
  fill: #777a83;
  font-size: 9px;
}

.next10-door-panel {
  fill: #1a1b21;
  stroke: #353842;
  stroke-width: 1.5;
}
.next10-left {
  transform-origin: 234px 184px;
}
.next10-right {
  transform-origin: 234px 184px;
}
.next10-handle {
  fill: #f51b5b;
}

.next10-step-shape {
  fill: #111217;
  stroke: #353842;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.next10-step-top {
  fill: none;
  stroke: #f51b5b;
  stroke-width: 2;
  opacity: 0.45;
}
.next10-step-label {
  fill: #777a83;
  font-size: 8px;
  opacity: 0.55;
}

.next10-walker {
  fill: #111217;
  stroke: #f51b5b;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 0 0;
}

.next10-door-panels {
  animation: next10Doors 8s ease-in-out infinite;
}
.next10-light {
  animation: next10Light 8s ease-in-out infinite;
}
.next10-handle {
  animation: next10Handles 8s ease-in-out infinite;
}
.next10-walker {
  animation: next10Walk 8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.next10-step-top {
  animation: next10Step 8s ease-in-out infinite;
}
.next10-step-label {
  animation: next10StepLabel 8s ease-in-out infinite;
}

@keyframes next10Doors {
  0%,
  22% {
    transform: translateX(0);
  }
  30%,
  67% {
    transform: translateX(0);
  }
  35%,
  62% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(0);
  }
}
/* Individual panels open like real double doors. */
.next10-left {
  animation: next10LeftDoor 8s ease-in-out infinite;
}
.next10-right {
  animation: next10RightDoor 8s ease-in-out infinite;
}
@keyframes next10LeftDoor {
  0%,
  22% {
    transform: translateX(0) rotateY(0deg);
  }
  30%,
  67% {
    transform: translateX(-28px);
  }
  74%,
  100% {
    transform: translateX(0);
  }
}
@keyframes next10RightDoor {
  0%,
  22% {
    transform: translateX(0) rotateY(0deg);
  }
  30%,
  67% {
    transform: translateX(28px);
  }
  74%,
  100% {
    transform: translateX(0);
  }
}
@keyframes next10Light {
  0%,
  22% {
    opacity: 0;
  }
  30%,
  67% {
    opacity: 0.85;
  }
  76%,
  100% {
    opacity: 0;
  }
}
@keyframes next10Handles {
  0%,
  22% {
    opacity: 0.8;
  }
  30%,
  67% {
    opacity: 0;
  }
  74%,
  100% {
    opacity: 0.8;
  }
}

/* The transform is relative to the walker's own 0,0 origin. */
@keyframes next10Walk {
  0%,
  7% {
    opacity: 0;
    transform: translate(92px, 285px);
  }
  10% {
    opacity: 1;
    transform: translate(110px, 285px);
  }
  23% {
    opacity: 1;
    transform: translate(165px, 285px);
  }
  32% {
    opacity: 1;
    transform: translate(205px, 285px);
  }
  43% {
    opacity: 1;
    transform: translate(250px, 285px);
  }
  52% {
    opacity: 1;
    transform: translate(305px, 285px);
  }
  61% {
    opacity: 1;
    transform: translate(355px, 285px);
  }
  67% {
    opacity: 1;
    transform: translate(378px, 285px);
  }
  72% {
    opacity: 1;
    transform: translate(398px, 258px);
  }
  79% {
    opacity: 1;
    transform: translate(425px, 258px);
  }
  87% {
    opacity: 1;
    transform: translate(462px, 258px);
  }
  92%,
  100% {
    opacity: 0;
    transform: translate(480px, 258px);
  }
}

@keyframes next10Step {
  0%,
  65% {
    opacity: 0.25;
  }
  70%,
  90% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0.25;
  }
}
@keyframes next10StepLabel {
  0%,
  65% {
    opacity: 0.2;
  }
  70%,
  90% {
    opacity: 0.9;
  }
  96%,
  100% {
    opacity: 0.2;
  }
}

@media (max-width: 700px) {
  .ullmatech-header-10 {
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ullmatech-header-10 * {
    animation: none !important;
  }
  .next10-light {
    opacity: 0.7;
  }
  .next10-walker {
    opacity: 1;
    transform: translate(425px, 258px);
  }
  .next10-step-top {
    opacity: 1;
  }
  .next10-step-label {
    opacity: 0.9;
  }
}

.ullmatech-header-09 .platform09-enquiries .platform09-notification,
.ullmatech-header-09 .platform09-sales .platform09-chart-dot {
  display: none;
}
/* =====================================================
   Mobile chapter navigation - final fix
   ===================================================== */

@media (max-width: 700px) {

    .ullmatech-chapter-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .ullmatech-chapter-nav__item {
        min-width: 0 !important;
        width: auto !important;
        min-height: 65px !important;
        box-sizing: border-box !important;
    }

    .ullmatech-chapter-nav__number,
    .ullmatech-chapter-nav__label {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .ullmatech-chapter-nav__label {
        line-height: 1.25 !important;
    }

}