/* =========================================================
   Kadence GKM — custom CSS (consolidated)
   ---------------------------------------------------------
   • Root variables
   • Base & layout
   • Navigation & header tweaks
   • Components (hero, CTA, lists, FAQ, videos, etc.)
   • System / plugin / layout fixes
   • Media helpers
   • Decorative accents (marble, borders, lines, grayscale)
   • Script / SVG animations
   • Animation system (vars, keyframes, helpers)
   • Responsive (<=768px / <=767px)
   • Reduced motion
   ========================================================= */


/* =========================
   Root Variables
   ========================= */

:root {
  /* Brand & palette */
  --surface: var(--global-palette9);
  --surface-light: var(--global-palette7);
  --brand-accent: var(--global-palette1);
  --brand-accent-dark: var(--global-palette1); /* same as accent */
  --brand-accent-light: var(--global-palette2);
  --border: #ECECEC;

  /* Typography */
  --heading-font: var(--global-heading-font-family);
  --heading-color: var(--global-palette3);
  --text-body: var(--global-palette3);
  --text-strong: var(--global-palette5);

  /* Buttons / gradients */
  --orange-gradient: linear-gradient(180deg, var(--global-palette1) 0%, var(--global-palette2) 100%);
  --orange-gradient-reverse: linear-gradient(0deg, var(--global-palette1) 0%, var(--global-palette2) 100%);

  /* Underline controls */
  --underline-height: 2px;
  --underline-gap: 0.4em;
  --underline-duration: 1s;
  --underline-target: 50%;

  /* Animation system */
  --ani-in-duration: 1s;
  --ani-out-duration: .5s;
  --ani-loop-duration: 20s;
  --ani-distance: 30px;
  --ani-loop-distance: 10px;
  --ani-zoom-from: 120%;
  --ani-zoom-from-scale: 1.2;
  --ani-delay: 0s;
  --ani-stagger-step: .15s; /* from latest snippet */
  --ani-hover-flip-duration: .6s;
  --ani-hover-flip-scale: 0;
}


/* =========================
   Base & Layout
   ========================= */

 [data-aos] {
  transform: none !important;
  animation: none !important;
}
  
.services-grid .kt-post-grid-layout-grid-wrap.kt-post-grid-wrap, .case-study-grid .kt-post-grid-layout-grid-wrap.kt-post-grid-wrap {
    display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
}
	
.services-grid article.kt-blocks-post-grid-item {
    max-width: 300px;
}

.case-study-grid article.kt-blocks-post-grid-item {
	width: 25% !important;
	max-width: 365px;
}

.service-template-default .content-area {
    padding-top: 0px;
    margin-top: 0;
    margin-bottom: 0;
}

.entry-content-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

.single-content h4.wp-block-heading {
  margin-top: 0.5em;
}

.single-content p {
  margin-bottom: 0.5em;
}

.masonry-gallery {
  max-width: 1000px;
  float: right;
}

.single-case-study div#primary {
  margin-top: 0;
}

.max-divider .kt-block-spacer {
  height: 100%;
}

.find-us-block {
  position: relative;
}

.find-us-block::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  background: #152C45 url('/wp-content/uploads/2025/10/icon-asset.png') no-repeat center center;
  background-size: 180px;
  z-index: 5000;
  pointer-events: none;
  left: -90px;
  top: 60px;
  border: 2px solid var(--brand-accent);
  box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.25);
  animation: fadeInScale 0.7s ease forwards;
}


/* =========================
   Navigation & Header Tweaks
   ========================= */

#mobile-header .kadence-sticky-header .site-header-row-container-inner {
  background: black !important;
}

.item-is-stuck span.search-toggle-icon {
  color: white;
}

.site-header-inner-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck {
  box-shadow: #00000012 0px 2px 20px;
}

.item-is-stuck,
div#main-header {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 30px -5px;
}

.home div#main-header,
.home .item-is-stuck {
  box-shadow: none;
}


/* =========================
   System / Plugin / Layout Fixes
   ========================= */

/* makes sure Better Search Replace notice shows */
.bsr-inner-notice-container .updated,
.updated.bsr-updated {
  display: block !important;
}

/* fixes issue with image overlay modules */
.wp-block-kadence-imageoverlay,
.wp-block-kadence-imageoverlay .kt-image-overlay-wrap,
.wp-block-kadence-imageoverlay .kt-block-intrisic {
  width: 100% !important;
  max-width: 100% !important;
}

/* Let the ratio box act as a frame */
.wp-block-kadence-imageoverlay .kt-block-intrisic {
  position: relative;
  overflow: hidden;
}

/* Make the image fully cover that frame */
.wp-block-kadence-imageoverlay .kt-block-intrisic img.kt-img-overlay {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block;
}

/* Allow overflow in specific cases */
.showoverflow {
  overflow: visible;
}

/* Drawer menu two columns */
.drawer-content .widget_nav_menu {
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 2rem;
}

/* Social icons color */
.wp-block-social-link-anchor a {
  color: white !important;
}

/* Case-study grid image width */
.case-study-grid figure.wp-block-kadence-image.kb-image786_a0b78b-fd.size-full.kb-image-is-ratio-size {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}

/* SVG sizing inside Kadence images */
figure.wp-block-kadence-image.image-is-svg {
  flex: 0 0 auto !important;
  height: auto !important;
}

figure.wp-block-kadence-image.image-is-svg svg.replaced-svg,
.wp-block-kadence-image svg {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Two-column content helpers for stacks */
.duo-image-stack:has(:nth-child(2)),
.after-image-stack:has(:nth-child(2)),
.before-image-stack:has(:nth-child(2)) {
  display: block !important;
  column-count: 2;
}


/* =========================
   Components
   ========================= */


.page-hero-section .entry-hero-container-inner {
  background: url('/wp-content/uploads/2025/10/bg-blue-dark.jpg')
             center / cover no-repeat; 
}

/* Footer background */
.site-footer-wrap {
  background-image: url('/wp-content/uploads/2025/11/grey.png');
  background-size: 40% auto;
  background-attachment: scroll;
  background-repeat: repeat;
}

/* Home service border */
.home-service-block .kadence-post-image {
  border-bottom: var(--global-palette1) solid 5px;
}


/* --- Section shell (pre-fold) --- */

section.section-gk {
  background: var(--surface);
  padding: 3em;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  margin-bottom: 60px;
  border-bottom: 6px solid var(--brand-accent);
  position: relative;
  z-index: 4;
}

section.section-gk-alt {
  background-color: #F4F7FF;
  background-repeat: repeat;
  background-size: 1200px;
  padding: 3em;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  margin-top: 40px;
  margin-bottom: 60px;
  border-bottom: 6px solid var(--brand-accent);
}

.section-gk h3 {
  margin-top: 0.5em;
  margin-bottom: 0.2em;
}


/* --- Service hero --- */

.service-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

.service-hero h6.eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--brand-accent);
    margin-bottom: 0;
    font-weight: 500;
    margin-top: 2em;
}

.service-hero h1 {
    font-family: var(--heading-font);
    font-size: 62px;
    margin: 0rem 0 0.5rem;
    position: relative;
    display: inline-block;
    line-height: 1.2em;
}

.service-hero h4 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 140%;
  font-family: var(--global-body-font-family);
  color: var(--global-palette6); /* keep color from older snippet */
}

.service-hero p {
  font-size: 1rem;
  color: var(--text-body);
  margin-bottom: 1rem;
  line-height: 1.6;
}


/* --- Service feature image --- */

.service-feature-image {
  position: relative;
  isolation: isolate;
}

/* BG layer on ::after */
.service-feature-image::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 30px;
  right: -35px;
  background: url('/wp-content/uploads/2025/11/strong-pattern.jpg') 100% / 100% repeat;
  z-index: 0;
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
  animation-name: sbZoomUp;
  animation-duration: 800ms;
  animation-timing-function: ease-out;
  animation-delay: 400ms;
  animation-fill-mode: both;
}

.service-feature-image > * {
  position: relative;
  z-index: 1;
}


/* --- Divider --- */

hr.section-divider {
  border: 0;
  border-top: 1px solid var(--brand-accent);
  margin: 35px 0;
}


/* --- CTA button --- */

.cta-btn {
  display: inline-block;
  background: var(--orange-gradient);
  color: var(--surface) !important;
  padding: .9rem 1.8rem;
  border-radius: 8px 0 8px 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  transition: all .3s ease;
  font-family: var(--heading-font);
}

.cta-btn:hover {
  background: var(--orange-gradient-reverse);
  transform: translateY(-2px);
}

.cta-btn:active {
  transform: translateY(0);
}


/* --- Service list --- */

ul.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-list li {
  position: relative;
  padding-left: 4em; /* from newer snippet */
  margin-bottom: 2rem;
  line-height: 1.4;
}

.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4em;
  width: 50px;
  height: 50px;
  background:
    white
    url("/wp-content/uploads/2025/10/icon-new-colors.png")
    center / 62% no-repeat;
  border: 1px solid var(--brand-accent);
  border-radius: 50%;
}

.service-list li > strong {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.5rem; /* from newer snippet */
  font-weight: 500;
  margin-bottom: .25rem;
  color: var(--heading-color);
}

.service-list .meta {
  display: block;
  margin-top: .5rem;
  font-size: .9rem;
  font-weight: 400;
  font-family: inherit;
  color: var(--global-palette4);
}

.service-list .meta strong {
  display: inline;
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
}


/* --- Tech list --- */

ul.tech-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.tech-list li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.tech-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -.075em;
  width: 28px;  /* from newer snippet */
  height: 28px; /* from newer snippet */
  background:
    #fff
    url("/wp-content/uploads/2025/10/icon-new-colors.png")
    center / 70% no-repeat;
}


/* --- FAQ component (dl/dt/dd) --- */

.gkfaq {
  --faq-left-gap: 64px;
  --faq-icon-size: 40px;
  margin: 2.5rem 0 0;
  background: transparent;
  border: none;
  padding: 0;
}

.gkfaq dt,
.gkfaq dd {
  margin: 0;
}

.gkfaq dt {
  margin-top: 12px;
  border: 0;
}

.gkfaq dt:first-of-type {
  margin-top: 0;
}

.gkfaq .gkfaq-toggle {
  appearance: none;
  background: white;
  color: black;
  border-bottom: 1px solid var(--brand-accent);
  border-radius: 0;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 10px -5px;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 26px 24px 26px var(--faq-left-gap);
  line-height: 1.5;
  font-weight: 500; /* from newer snippet */
  font-size: 22px;  /* from newer snippet */
  position: relative;
  transition: background-color .25s ease, color .25s ease;
  font-family: var(--global-heading-font-family);
  text-transform: none !important;
  letter-spacing: 0px;
}

.gkfaq .gkfaq-toggle::before {
  content: "+";
  position: absolute;
  left: calc((var(--faq-left-gap) - var(--faq-icon-size)) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--faq-icon-size);
  height: var(--faq-icon-size);
  border: 2px solid var(--brand-accent, #E7DB73);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-accent, #E7DB73);
  background: #fff;
  box-sizing: border-box;
  transition: all .25s ease;
}

.gkfaq .gkfaq-toggle::after {
  content: none !important;
}

.gkfaq .gkfaq-toggle:hover {
  background: var(--surface-light);
}

.gkfaq .gkfaq-toggle:hover::before {
  border-color: #000;
  color: #000;
}

.gkfaq .gkfaq-toggle[aria-expanded="true"] {
  background: var(--surface-light);
  color: var(--text-strong, #222);
}

.gkfaq .gkfaq-toggle[aria-expanded="true"]::before {
  content: "–";
  background: var(--surface);
  color: black;
}

.gkfaq dd {
  padding: 20px var(--faq-left-gap) 24px;
  color: var(--text-body, #555);
  line-height: 1.65;
  border: 0;
}

.gkfaq.is-enhanced dd {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  padding: 0 var(--faq-left-gap) 0;
  border: 0;
  transition: max-height .34s ease, padding .34s ease, opacity .24s ease, transform .34s ease;
}

.gkfaq.is-enhanced dt.is-open + dd {
  opacity: 1;
  transform: translateY(0);
  padding: 20px var(--faq-left-gap) 85px;
}



/* --- Enhanced video embed --- */

.gk-embed-video {
  position: relative !important;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  cursor: pointer;
}

/* Rounded corners for thumbnail and iframe */
.gk-embed-video,
.gk-embed-video img,
.gk-embed-video iframe {
  border-radius: 12px;
  overflow: hidden;
}

/* Play button setup */
.gk-embed-video .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  border: 3px solid var(--brand-accent, #f18b24);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

/* Triangle play icon */
.gk-embed-video .play-btn::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid var(--brand-accent, #f18b24);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transition: border-left-color 0.3s ease;
}

/* Hover effect: fill circle + white play icon */
.gk-embed-video:hover .play-btn {
  background: var(--brand-accent, #f18b24);
  border-color: var(--brand-accent, #f18b24);
}

.gk-embed-video:hover .play-btn::before {
  border-left-color: #fff;
}

.gk-embed-video img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Single post / buttons spacing --- */

.single-post .entry-content-wrap {
  padding-top: 20px;
}

.kt-inside-inner-col .wp-block-kadence-advancedbtn.kb-buttons-wrap {
  margin-top: 2em;
}


/* =========================
   Media Helpers
   ========================= */

/* keeps the featured videos on service pages to a 16 by 9 ratio */
.video-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

/* Make anything inside fill it */
.video-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Simple column helper */
.two-columns {
  columns: 2;
  gap: 1em;
}


/* =========================
   Decorative Accents
   ========================= */

/* modification to the before and after slider */

.kba .kba-range {
border: none;
}

/* Base state: grayscale for generic hover */
.color-on-hover img,
img.color-on-hover {
  filter: grayscale(100%);
  transition: filter 0.4s ease-in-out;
}

/* Hover: restore color */
.color-on-hover:hover img,
img.color-on-hover:hover {
  filter: grayscale(0%);
}

/* Utility for background images: grayscale by default, color on hover */
.bg-color-on-hover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
}

/* Overlay that removes saturation from the background */
.bg-color-on-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  mix-blend-mode: saturation;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
  z-index: 2;
}

/* Ensure inner content sits above the overlay */
.bg-color-on-hover > * {
  position: relative;
  z-index: 2;
}

/* Hover: remove overlay → restore full color */
.bg-color-on-hover:hover::after {
  opacity: 0;
}


/* Gold inset borders */
.gold-bordered,
.gold-bordered-circle {
  position: relative;
}

.gold-bordered::before,
.gold-bordered-circle::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid var(--brand-accent);
  pointer-events: none;
  z-index: 3;
  display: inline-block;
}

.gold-bordered-circle::before {
  border-radius: 50%;
}

/* Outer white lines (left/right) */
.outer-lined::before,
.outer-lined::after {
  content: "";
  display: inline-block;
  height: 2px;
  width: 70px;
  background: #fff;
  position: relative;
  top: -9px;
}

.outer-lined::before {
  left: -10px;
}

.outer-lined::after {
  right: -10px;
}

/* Gold border wrapper */
.gold-border,
.color-band-btm {
  position: relative;
  z-index: 0;
  overflow: visible;
}

.gold-border::after {
  content: "";
  position: absolute;
  border: 1px solid var(--brand-accent);
  top: 15px;
  right: 15px;
  left: 15px;
  bottom: 15px;
}

/* Marble corners (top/bottom, left/right) */
.marble-corner-btmleft,
.marble-corner-btmright,
.marble-corner-topleft,
.marble-corner-topright {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  z-index: 0;
}

/* Shared marble corner block */
.marble-corner-btmleft::after,
.marble-corner-btmright::after,
.marble-corner-topleft::after,
.marble-corner-topright::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 60%;
  background: url('/wp-content/uploads/2025/10/bg-blue-dark.jpg')
             center / cover no-repeat;
  z-index: -1;
  transform: scale(1);
  backface-visibility: hidden;
  will-change: transform;
  animation: sbZoomUp 800ms ease-out 400ms both;
}

/* positions as percentage offsets */
.marble-corner-btmleft::after {
  bottom: -5%;
  left: -5%;
}

.marble-corner-btmright::after {
  bottom: -5%;
  right: -5%;
}

.marble-corner-topleft::after {
  top: -5%;
  left: -5%;
}

.marble-corner-topright::after {
  top: -5%;
  right: -5%;
}

/* Misc accents */
.case-description {
  border-left: 3px solid var(--global-palette1);
}

.thin-text {
  font-weight: 100 !important;
}

.unmounted {
  position: absolute !important;
}


/* =========================
   Animated Underline (Kadence)
   ========================= */

.ani-underline {
  position: relative;
  display: inline-block;
  margin-bottom: 0.4em;
}

.ani-underline::after {
  content: "";
  display: block;
  width: 0;
  height: var(--underline-height, 3px);
  background: var(--global-palette1, #ba8d5d);
  margin-top: var(--underline-gap, 6px);
  transition: width var(--underline-duration, 1s) ease-out;
  will-change: width;
}

.ani-underline.u-underline-ready::after {
  width: var(--underline-target, 50%);
}

/* Alignment helpers */
.has-text-align-center.ani-underline {
  display: inline-block;
  width: fit-content;
  margin: 0.4em auto;
}

.ani-underline.has-text-align-center::after {
  margin-left: auto;
  margin-right: auto;
}

.ani-underline.has-text-align-right::after {
  margin-left: auto;
  margin-right: 0;
}


/* =========================
   SVG Stroke “Write” Animation
   ========================= */

/* Base: keep strokes hidden until JS measures lengths */
.kb-vector-container svg .st4 {
  stroke-dasharray: var(--len, 1);
  stroke-dashoffset: var(--len, 1);
  opacity: 1;
}

/* When we trigger the animation */
.kb-vector-container.is-drawing svg .st4 {
  animation: svg-write 1.25s ease-out forwards;
}

/* Optional: subtle fade while drawing */
.kb-vector-container.is-drawing svg .st4 {
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

@keyframes svg-write {
  to { stroke-dashoffset: 0; }
}


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

@keyframes aniInUp {
  from { opacity: 0; transform: translateY(var(--ani-distance)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aniZoomElement {
  from { transform: scale(var(--ani-zoom-from-scale)); }
  to   { transform: scale(1); }
}

@keyframes aniBgZoom {
  from { background-size: var(--ani-zoom-from) auto; }
  to   { background-size: 100% auto; }
}

@keyframes aniLoopVert {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(calc(var(--ani-loop-distance) * -1)); }
}

@keyframes aniLoopHoriz {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(var(--ani-loop-distance)); }
}

@keyframes aniLoopRandom {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(var(--ani-loop-distance), calc(var(--ani-loop-distance) * -1)); }
  50%  { transform: translate(calc(var(--ani-loop-distance) * -1), var(--ani-loop-distance)); }
  75%  { transform: translate(var(--ani-loop-distance), var(--ani-loop-distance)); }
  100% { transform: translate(0, 0); }
}

@keyframes aniHoverFlip {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(var(--ani-hover-flip-scale)); }
  100% { transform: scaleX(1); }
}

@keyframes fadeInScale {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* Zoom-up used by service feature + marble corners */
@keyframes sbZoomUp {
  from { transform: scale(0.85); }
  to   { transform: scale(1); }
}

/* Base helpers */
.ani {
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: var(--ani-delay);
  will-change: transform, opacity, background-size;
}

.is-inview {
  animation-play-state: running;
}

/* Ready-made animation classes */
.ani-in-up {
  animation-name: aniInUp;
  animation-duration: var(--ani-in-duration);
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: var(--ani-delay);
  opacity: 0;
  transform: translateY(var(--ani-distance));
}

.ani-in-zoom {
  animation-name: aniZoomElement;
  animation-duration: var(--ani-in-duration);
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: var(--ani-delay);
  transform-origin: center center;
}

.ani-bg-zoom {
  animation-name: aniBgZoom;
  animation-duration: 2s, var(--ani-in-duration);
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: var(--ani-delay);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.ani-loop-vert,
.ani-loop-horiz,
.ani-loop-random {
  animation-duration: var(--ani-loop-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-delay: var(--ani-delay);
}

.ani-loop-vert {
  animation-name: aniLoopVert;
}

.ani-loop-horiz {
  animation-name: aniLoopHoriz;
}

.ani-loop-random {
  animation-name: aniLoopRandom;
}

/* Activate on in-view */
.is-inview.ani-in-up,
.is-inview.ani-in-zoom,
.is-inview.ani-bg-zoom,
.is-inview.ani-loop-vert,
.is-inview.ani-loop-horiz,
.is-inview.ani-loop-random {
  animation-play-state: running;
}

/* Hover flip for images/SVGs */
.ani-hover-flip svg,
.ani-hover-flip img {
  display: inline-block;
  transform-origin: center;
  transition: transform var(--ani-hover-flip-duration) ease-in-out;
}

.ani-hover-flip:hover svg,
.ani-hover-flip:hover img {
  animation: aniHoverFlip var(--ani-hover-flip-duration) ease-in-out forwards;
}

/* Immediate-run helper */
.ani-immediate {
  animation-play-state: running !important;
  opacity: initial;
  transform: none;
}

/* Stagger utilities */
.ani-stagger-0  { --ani-delay: calc(var(--ani-stagger-step) * 0); }
.ani-stagger-1  { --ani-delay: calc(var(--ani-stagger-step) * 1); }
.ani-stagger-2  { --ani-delay: calc(var(--ani-stagger-step) * 2); }
.ani-stagger-3  { --ani-delay: calc(var(--ani-stagger-step) * 3); }
.ani-stagger-4  { --ani-delay: calc(var(--ani-stagger-step) * 4); }
.ani-stagger-5  { --ani-delay: calc(var(--ani-stagger-step) * 5); }
.ani-stagger-6  { --ani-delay: calc(var(--ani-stagger-step) * 6); }
.ani-stagger-7  { --ani-delay: calc(var(--ani-stagger-step) * 7); }
.ani-stagger-8  { --ani-delay: calc(var(--ani-stagger-step) * 8); }
.ani-stagger-9  { --ani-delay: calc(var(--ani-stagger-step) * 9); }
.ani-stagger-10 { --ani-delay: calc(var(--ani-stagger-step) * 10); }

/* Auto-stagger for Kadence columns (extend as needed) */
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(1)  { --ani-delay: calc(var(--ani-stagger-step) * 0); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(2)  { --ani-delay: calc(var(--ani-stagger-step) * 1); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3)  { --ani-delay: calc(var(--ani-stagger-step) * 2); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(4)  { --ani-delay: calc(var(--ani-stagger-step) * 3); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(5)  { --ani-delay: calc(var(--ani-stagger-step) * 4); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(6)  { --ani-delay: calc(var(--ani-stagger-step) * 5); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(7)  { --ani-delay: calc(var(--ani-stagger-step) * 6); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(8)  { --ani-delay: calc(var(--ani-stagger-step) * 7); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(9)  { --ani-delay: calc(var(--ani-stagger-step) * 8); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(10) { --ani-delay: calc(var(--ani-stagger-step) * 9); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(11) { --ani-delay: calc(var(--ani-stagger-step) * 10); }
.ani-stagger-auto > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(12) { --ani-delay: calc(var(--ani-stagger-step) * 11); }


/* =========================
   Responsive
   ========================= */

/* Force Kadence to show video backgrounds on mobile */
@media (max-width: 767px) {
  .kb-blocks-bg-video-container {
    display: block !important;
    opacity: 1 !important;
  }
  .kb-blocks-bg-video {
    display: block !important;
  }
}

@media (max-width: 768px) {

.outer-lined::before,
.outer-lined::after {
  display: none;
}
  .pre-fold-container {
    display: none;
  }

  section.section-gk {
    background: transparent; /* override from newer snippet */
    box-shadow: none;
    padding: 1em;
    margin-bottom: 40px;
    border-bottom: none;
  }

  .service-hero h1 {
    font-size: 44px;
  }

  .service-hero h6.eyebrow {
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .service-hero h4 {
    font-size: 1.2rem;
  }

  .service-list li {
    padding-left: 55px;
    margin-bottom: 1rem;
  }

  .service-list li::before {
    left: 0;
    top: .5em;
    width: 40px;
    height: 40px;
  }

  .tech-list li {
    padding-left: 40px;
  }

  .tech-list li::before {
    width: 22px;
    height: 22px;
    background-size: 70%;
  }

  h2.gkctabox {
    font-size: 32px;
  }

  .gkfaq {
    --faq-left-gap: 52px;
    --faq-icon-size: 34px;
  }

  .gkfaq .gkfaq-toggle {
    padding: 18px 16px 18px var(--faq-left-gap);
    font-size: 1rem;
    min-height: 44px;
  }

  .gkfaq dd {
    padding: 14px var(--faq-left-gap) 18px;
  }

  .two-columns {
    columns: 1;
  }
	


  /* Marble squares smaller on mobile (legacy classes) */
  .marble-top-left::after {
    top: -40px;
    left: -40px;
    width: 80px;
    height: 80px;
  }

  .marble-top-right::after {
    top: -40px;
    right: -40px;
    width: 80px;
    height: 80px;
  }

  /* hides reviews in sidebar */
  .sidebar-testimonials {
    display: none;
  }
}

  #zdoc-widget-root {
    display: none !important;
  }


/* =========================
   Reduced Motion (global)
   ========================= */

@media (prefers-reduced-motion: reduce) {
  .ani,
  [class*="ani-"] {
    animation: none !important;
    transition: none !important;
  }

  .ani-underline::after {
    transition: none;
  }

  .gkfaq.is-enhanced dd,
  .gkfaq .gkfaq-toggle,
  .gkfaq .gkfaq-toggle::before {
    transition: none;
  }

  .kb-vector-container svg .st4 {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none !important;
  }
}