/* Octosan motion enhancements - Kubio-aware */

@media (prefers-reduced-motion: reduce) {
  .octosan-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .octosan-anim * { transition: none !important; animation: none !important; }
}

/* Base: hidden until JS adds .is-in-view */
.octosan-anim {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform  0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.octosan-anim.is-in-view {
  opacity: 1;
  transform: none;
}

/* Hero accent: stagger the 4 product columns */
#hero-accent .wp-block-kubio-column { transition-delay: 0s; }
#hero-accent .wp-block-kubio-row > .wp-block-kubio-column:nth-child(1).octosan-anim { transition-delay: 0.05s; }
#hero-accent .wp-block-kubio-row > .wp-block-kubio-column:nth-child(2).octosan-anim { transition-delay: 0.18s; }
#hero-accent .wp-block-kubio-row > .wp-block-kubio-column:nth-child(3).octosan-anim { transition-delay: 0.31s; }
#hero-accent .wp-block-kubio-row > .wp-block-kubio-column:nth-child(4).octosan-anim { transition-delay: 0.44s; }

/* Product card: hover lift + image zoom */
#hero-accent .wp-block-kubio-column__inner {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.5s ease;
}
#hero-accent .wp-block-kubio-column:hover .wp-block-kubio-column__inner {
  transform: translateY(-8px);
  box-shadow: 0 22px 44px -18px rgba(0, 60, 90, 0.25),
              0 6px 14px -6px rgba(0, 60, 90, 0.12);
}
#hero-accent .wp-block-kubio-image__image,
#hero-accent .wp-block-kubio-image img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center bottom;
}
#hero-accent .wp-block-kubio-column:hover .wp-block-kubio-image__image,
#hero-accent .wp-block-kubio-column:hover .wp-block-kubio-image img {
  transform: scale(1.06);
}

/* CTA buttons: keep Kubio's native hover (color shift). No JS-driven motion. */

/* Heading reveal: split-line slide-up for h1/h2 inside animated sections */
.octosan-anim h1, .octosan-anim h2 {
  display: inline-block;
}

/* ROI calculator section: gentle attention pulse on its first reveal */
.octosan-anim.octosan-roi.is-in-view {
  animation: octosanRoiGlow 2.6s ease 0.2s 1;
}
@keyframes octosanRoiGlow {
  0%   { box-shadow: 0 0 0 0 rgba(0, 130, 170, 0.0); }
  35%  { box-shadow: 0 0 0 14px rgba(0, 130, 170, 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(0, 130, 170, 0.0); }
}

/* Hero — Ken Burns fallback when no MP4 is present. When the JS injects a
   <video class="octosan-hero-video"> child, .octosan-hero-has-video disables
   the static image + Ken Burns and the video takes over. */
#hero {
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background-size: 120% !important;
  background-repeat: no-repeat !important;
  animation: octosanHeroFlow 22s ease-in-out infinite alternate;
  will-change: background-position, background-size;
}
@keyframes octosanHeroFlow {
  0%   { background-position: 35% 40%; background-size: 115%; }
  100% { background-position: 65% 60%; background-size: 130%; }
}

/* Video takeover */
#hero.octosan-hero-has-video {
  background-image: none !important;
  animation: none !important;
}
.octosan-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;       /* behind any inner content */
  pointer-events: none;
  border-radius: inherit;
}
/* Make sure the hero's children stay on top of the video */
#hero.octosan-hero-has-video > *:not(.octosan-hero-video) {
  position: relative;
  z-index: 1;
}

/* OCTOPI 1.0 — Introduction product image (column with CSS background-image)
   Targets the specific Kubio styleRef on the OCTOPI page. The image is the
   Eco-Sans.2567-1-scaled.png on .style-q32ucqVMg-inner. */
/* Product-page background-image columns — all 4 product pages.
   We do NOT touch background-size so Kubio's original sizing (cover OR a fixed
   percentage for centered product photos) is preserved.
     - q32ucqVMg  : OCTOPI main intro (cover) → pan
     - ep874vRkTtc: OCTO / OCTOFRESH / OCTO NANO main intro (47% centered) → breathe
     - yLCk4DmIdyq: Secondary section image on all 4 pages (mixed sizing) */
.style-q32ucqVMg-inner,
.style-ep874vRkTtc-inner,
.style-yLCk4DmIdyq-inner {
  transition: box-shadow 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
  will-change: background-position, background-size;
}

/* Cover-sized columns get a slow horizontal pan (Ken Burns) */
.style-q32ucqVMg-inner,
.style-yLCk4DmIdyq-inner {
  animation: octosanIntroPan 26s ease-in-out infinite alternate;
}
.style-yLCk4DmIdyq-inner { animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes octosanIntroPan {
  0%   { background-position: 42% 45%; }
  100% { background-position: 62% 55%; }
}

/* Centered product-photo columns get a gentle "breathing" scale.
   Default uses 47%↔50% (OCTOFRESH + OCTO). OCTO NANO is natively 41%
   and crops at 47%, so it gets its own narrower 38%↔41% range. */
.style-ep874vRkTtc-inner {
  animation: octosanIntroBreathe 8s ease-in-out infinite alternate;
}
@keyframes octosanIntroBreathe {
  0%   { background-size: 47% auto; }
  100% { background-size: 50% auto; }
}
.page-id-328 .style-ep874vRkTtc-inner {
  animation-name: octosanIntroBreatheNano;
}
@keyframes octosanIntroBreatheNano {
  0%   { background-size: 38% auto; }
  100% { background-size: 41% auto; }
}

.style-q32ucqVMg-inner:hover,
.style-ep874vRkTtc-inner:hover,
.style-yLCk4DmIdyq-inner:hover {
  box-shadow: 0 30px 60px -28px rgba(0, 60, 90, 0.35),
              0 10px 24px -10px rgba(0, 60, 90, 0.18);
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .style-q32ucqVMg-inner,
  .style-ep874vRkTtc-inner,
  .style-yLCk4DmIdyq-inner { animation: none !important; }
}

/* Reveal on scroll-in — JS tags these with .octosan-anim + .is-in-view */
.style-q32ucqVMg-inner.octosan-anim,
.style-ep874vRkTtc-inner.octosan-anim,
.style-yLCk4DmIdyq-inner.octosan-anim {
  opacity: 0;
}
.style-q32ucqVMg-inner.octosan-anim.is-in-view,
.style-ep874vRkTtc-inner.octosan-anim.is-in-view,
.style-yLCk4DmIdyq-inner.octosan-anim.is-in-view {
  opacity: 1;
}

/* Introduction to OCTOPI 1.0 — main product image (#about)
   Subtle continuous float + reveal scale + soft hover lift with shadow. */
#about .wp-block-kubio-image {
  perspective: 1200px;
}
#about .wp-block-kubio-image.octosan-anim {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1),
              transform 1s cubic-bezier(0.22,1,0.36,1);
}
#about .wp-block-kubio-image.octosan-anim.is-in-view {
  opacity: 1;
  transform: none;
}

#about .wp-block-kubio-image__image,
#about .wp-block-kubio-image img {
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1),
              filter   0.6s ease;
  filter: drop-shadow(0 18px 30px rgba(0, 60, 90, 0.10));
  will-change: transform, filter;
}
@media (prefers-reduced-motion: no-preference) {
  #about .wp-block-kubio-image.is-in-view .wp-block-kubio-image__image,
  #about .wp-block-kubio-image.is-in-view img {
    animation: octosanAboutFloat 7s ease-in-out infinite;
  }
}
@keyframes octosanAboutFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
#about .wp-block-kubio-image:hover .wp-block-kubio-image__image,
#about .wp-block-kubio-image:hover img {
  animation-play-state: paused;
  transform: translateY(-8px) scale(1.025);
  filter: drop-shadow(0 28px 44px rgba(0, 60, 90, 0.22));
}

/* ============================================================
   USE-CASE GRID — the redesigned section that replaces the
   legacy #portfolio-1/2/3 panels. 5 cards in an asymmetric grid;
   each card has a 16:9 media area (still + lazy video) and a text block. */

/* Hide the legacy portfolio sections — the new section takes over */
.oc-legacy-hidden { display: none !important; }

.oc-usecases {
  padding: clamp(50px, 7vw, 100px) clamp(16px, 3vw, 36px);
  background: linear-gradient(180deg, #fafbfc 0%, #f3f5f7 100%);
}
.oc-usecases-grid {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.oc-usecase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 6px 22px -12px rgba(15, 35, 55, 0.12),
              0 1px 3px rgba(15, 35, 55, 0.06);
  border: 1px solid rgba(15, 35, 55, 0.05);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease,
              border-color 0.5s ease;
  cursor: pointer;
}
.oc-usecase-card.is-large { grid-column: span 3; }   /* 2 cards per row */
.oc-usecase-card.is-small { grid-column: span 2; }   /* 3 cards per row */

.oc-usecase-card:hover,
.oc-usecase-card.is-active {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px -26px rgba(15, 35, 55, 0.28),
              0 8px 20px -10px rgba(15, 35, 55, 0.12);
  border-color: rgba(var(--kubio-color-1), 0.20);
}

.oc-usecase-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a1320;
  overflow: hidden;
}
.oc-usecase-still,
.oc-usecase-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.oc-usecase-still {
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
  z-index: 1;
}
.oc-usecase-video {
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
  background: #0a1320;
}
.oc-usecase-card.is-active .oc-usecase-still {
  opacity: 0;
}
.oc-usecase-card.is-active .oc-usecase-video {
  opacity: 1;
  z-index: 2;
}

/* Play indicator badge top-right of the media */
.oc-usecase-play {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20),
              0 6px 14px -6px rgba(0, 0, 0, 0.30);
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.oc-usecase-play::before {
  content: "";
  position: absolute;
  top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #ffffff;
}
.oc-usecase-card.is-active .oc-usecase-play {
  opacity: 0;
  transform: scale(0.75);
}

/* Text block */
.oc-usecase-text {
  padding: 28px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oc-usecase-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--kubio-color-1), 1);
  display: inline-block;
}
.oc-usecase-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #1a2734;
  margin: 0;
}
.oc-usecase-card.is-large .oc-usecase-title { font-size: 30px; }
.oc-usecase-lead {
  font-size: 16px;
  line-height: 1.6;
  color: #5a6573;
  margin: 0;
  /* clamp to 4 lines max so cards stay even */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oc-usecase-card.is-large .oc-usecase-lead { font-size: 17px; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .oc-usecases-grid { grid-template-columns: repeat(2, 1fr); }
  .oc-usecase-card.is-large,
  .oc-usecase-card.is-small { grid-column: span 1; }
}
@media (max-width: 560px) {
  .oc-usecases-grid { grid-template-columns: 1fr; }
}

/* Reduced-motion users — no hover transitions, no video */
@media (prefers-reduced-motion: reduce) {
  .oc-usecase-card,
  .oc-usecase-still,
  .oc-usecase-video,
  .oc-usecase-play { transition: none !important; }
  .oc-usecase-video { display: none !important; }
}

/* ============================================================
   USE-CASE HOVER-TO-PLAY PANELS (LEGACY) — kept for OCTOPI page if any
   The portfolio columns (Construction / Public / Events / Oil&Gas /
   Military) get a lazy video overlay + caption that animates on hover.
   JS adds .octosan-usecase-panel + injects <video class="octosan-usecase-video">. */
.octosan-usecase-panel {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: box-shadow 0.5s cubic-bezier(0.22,1,0.36,1),
              transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.octosan-usecase-panel.is-hovering {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -28px rgba(0, 60, 90, 0.45),
              0 10px 24px -10px rgba(0, 60, 90, 0.22);
  z-index: 2;
}
/* Pause any continuous Ken Burns / breathe animation while video is showing */
.octosan-usecase-panel.is-hovering {
  animation-play-state: paused !important;
}

/* The lazy-loaded <video> overlay */
.octosan-usecase-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 1.6s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: #0a1320;
}
.octosan-usecase-video.is-playing {
  opacity: 1;
  transform: scale(1);
}

/* Bottom-gradient + caption overlay */
.octosan-usecase-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(180deg,
              rgba(8, 18, 30, 0) 0%,
              rgba(8, 18, 30, 0.35) 50%,
              rgba(8, 18, 30, 0.78) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s ease;
}
.octosan-usecase-panel.is-hovering::after {
  opacity: 0.92;
}

.octosan-usecase-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 26px 24px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.octosan-usecase-panel.is-hovering .octosan-usecase-caption {
  transform: translateY(-4px);
}
.octosan-usecase-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.octosan-usecase-title {
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.octosan-usecase-hint {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  opacity: 1;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.octosan-usecase-panel.is-hovering .octosan-usecase-hint {
  opacity: 0;
  transform: translateY(6px);
}

/* Subtle play-pulse indicator on idle (top-right) */
.octosan-usecase-panel::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
  z-index: 4;
  pointer-events: none;
  background-image: linear-gradient(135deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: 13px 11px;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1), background 0.4s ease;
  opacity: 0.85;
}
.octosan-usecase-panel.is-hovering::before {
  opacity: 0;
  transform: scale(0.7);
}

/* Touch-device tweaks */
@media (hover: none) {
  .octosan-usecase-hint { opacity: 0.7; }
  .octosan-usecase-panel::before { display: none; }
}

/* Reduced-motion users — no video play, just static photos */
@media (prefers-reduced-motion: reduce) {
  .octosan-usecase-video { display: none !important; }
}

/* Clients section — continuous marquee scroll
   The JS clones the row children once and adds the wrapper classes. */
.octosan-marquee-container {
  overflow: hidden !important;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.octosan-marquee-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  align-items: center !important;
  justify-content: flex-start !important;
  animation: octosanMarquee 48s linear infinite;
  will-change: transform;
}
.octosan-marquee-track > .wp-block-kubio-column {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.octosan-marquee-track > .wp-block-kubio-column > .wp-block-kubio-column__inner,
.octosan-marquee-track > .wp-block-kubio-column .wp-block-kubio-column__align {
  padding: 0 22px !important;
  margin: 0 !important;
}
.octosan-marquee-track .wp-block-kubio-image,
.octosan-marquee-track .wp-block-kubio-image__container {
  margin: 0 !important;
  padding: 0 !important;
}
.octosan-marquee-track .wp-block-kubio-image__image,
.octosan-marquee-track .wp-block-kubio-image img {
  max-width: 180px !important;
  max-height: 120px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}
.octosan-marquee-container:hover .octosan-marquee-track {
  animation-play-state: paused;
}
@keyframes octosanMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .octosan-marquee-track { animation: none !important; }
}

/* Features section — subtle stagger reveal + gentle hover lift on the 3 cards
   under the "Enabling Safe Sanitation Without Infrastructure Barriers" heading. */
#features .wp-block-kubio-row + .wp-block-kubio-row > .wp-block-kubio-column.octosan-anim:nth-child(1) { transition-delay: 0.05s; }
#features .wp-block-kubio-row + .wp-block-kubio-row > .wp-block-kubio-column.octosan-anim:nth-child(2) { transition-delay: 0.18s; }
#features .wp-block-kubio-row + .wp-block-kubio-row > .wp-block-kubio-column.octosan-anim:nth-child(3) { transition-delay: 0.31s; }

#features .wp-block-kubio-row + .wp-block-kubio-row .wp-block-kubio-column__inner {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow  0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#features .wp-block-kubio-row + .wp-block-kubio-row .wp-block-kubio-column:hover .wp-block-kubio-column__inner {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -16px rgba(0, 60, 90, 0.22),
              0 4px 10px -4px rgba(0, 60, 90, 0.08);
}

/* Feature icon — quiet scale on card hover */
#features .wp-block-kubio-icon svg,
#features .wp-block-kubio-icon__inner {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}
#features .wp-block-kubio-row + .wp-block-kubio-row .wp-block-kubio-column:hover .wp-block-kubio-icon svg,
#features .wp-block-kubio-row + .wp-block-kubio-row .wp-block-kubio-column:hover .wp-block-kubio-icon__inner {
  transform: scale(1.08);
}

/* Ken Burns slow-flow on the big section background images
   (Portfolio panels + Content 1). Animates the background image directly. */
[id^="portfolio"] .wp-block-kubio-column__inner,
#content-1 .wp-block-kubio-column__inner {
  background-size: 115% !important;
  background-repeat: no-repeat !important;
  animation: octosanKenBurnsA 28s ease-in-out infinite alternate;
  will-change: background-position, background-size;
}

#portfolio-1 .wp-block-kubio-row > .wp-block-kubio-column:nth-child(2) .wp-block-kubio-column__inner,
#portfolio-3 .wp-block-kubio-column__inner {
  animation: octosanKenBurnsB 32s ease-in-out infinite alternate;
}
#portfolio-2 .wp-block-kubio-column__inner { animation-duration: 30s; }
#content-1   .wp-block-kubio-column__inner { animation-duration: 36s; }

@keyframes octosanKenBurnsA {
  0%   { background-position: 30% 40%; background-size: 112%; }
  100% { background-position: 70% 60%; background-size: 122%; }
}
@keyframes octosanKenBurnsB {
  0%   { background-position: 65% 35%; background-size: 118%; }
  100% { background-position: 35% 70%; background-size: 110%; }
}

/* Subtle floating motion on product images, paused on hover */
@keyframes octosanFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
#hero-accent .wp-block-kubio-image__image,
#hero-accent .wp-block-kubio-image img {
  animation: octosanFloat 6s ease-in-out infinite;
}
#hero-accent .wp-block-kubio-column:nth-child(2) .wp-block-kubio-image__image,
#hero-accent .wp-block-kubio-column:nth-child(2) .wp-block-kubio-image img { animation-delay: 0.6s; }
#hero-accent .wp-block-kubio-column:nth-child(3) .wp-block-kubio-image__image,
#hero-accent .wp-block-kubio-column:nth-child(3) .wp-block-kubio-image img { animation-delay: 1.2s; }
#hero-accent .wp-block-kubio-column:nth-child(4) .wp-block-kubio-image__image,
#hero-accent .wp-block-kubio-column:nth-child(4) .wp-block-kubio-image img { animation-delay: 1.8s; }
#hero-accent .wp-block-kubio-column:hover .wp-block-kubio-image__image,
#hero-accent .wp-block-kubio-column:hover .wp-block-kubio-image img {
  animation-play-state: paused;
}