/* =========================================================
   Kadence GKM — custom CSS (consolidated)
   ---------------------------------------------------------
   • Base & layout
   • Components (buttons, lists, hero, FAQ, dividers, etc.)
   • Media helpers
   • Decorative accents (marble, borders, lines)
   • Utilities
   • Animation system (vars, keyframes, helpers)
   • Responsive (<=768px)
   • Reduced motion
   ========================================================= */

: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);
  --text-body: var(--global-palette5);
  --text-strong: var(--global-palette5);
  --heading-color: var(--global-palette3);
  
  /* 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: .3s;
  --ani-hover-flip-duration: .6s;
  --ani-hover-flip-scale: 0;
}

/* =========================
   Base & Layout
   ========================= */
   
   
/* Container for the script line */
.script-write-on {
  display: inline-block;
  white-space: nowrap;
}

/* Each character span */
.script-write-on .script-char {
  display: inline-block;
  transform-origin: left center;
  transform: scaleX(0.1);
  opacity: 0;
  filter: blur(3px);
  /* staggered timing based on --i set in JS */
  animation: scriptLetterDraw 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 0.03s);
}

/* Main animation: “grows” horizontally, snaps into focus */
@keyframes scriptLetterDraw {
  0% {
    transform: scaleX(0.1) translateY(1px);
    opacity: 0;
    filter: blur(3px);
  }
  60% {
    transform: scaleX(1.1) translateY(-1px); /* slight overshoot */
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scaleX(1) translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}



/* =========================
   HEADING OUTLINE
   ========================= */

/* Core Heading block (Gutenberg) */
h1.text-outline,
h2.text-outline,
h3.text-outline,
h4.text-outline {
  color: transparent !important;
  -webkit-text-stroke: 2px #000000; /* outline color */
}

/* Kadence Advanced Heading:
   when the class is on the wrapper div, target the inner heading */
.text-outline .kt-adv-heading,
.text-outline .kt-adv-heading span {
  color: transparent !important;
  -webkit-text-stroke: 2px #FFFFFF; /* outline color */
}


/* Hollow text with WHITE outline */
h1.text-outline-white,
h2.text-outline-white,
h3.text-outline-white,
h4.text-outline-white,
.text-outline-white .kt-adv-heading,
.text-outline-white .kt-adv-heading span {
  color: transparent !important;
  -webkit-text-stroke: 2px #ffffff !important; /* WHITE outline */
}





/* makes sure you can see better search pro notice */

.bsr-inner-notice-container .updated, .updated.bsr-updated {
    display: block !important;
}

   
.services-grid .kt-post-grid-layout-grid-wrap.kt-post-grid-wrap {
    display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	}


article.kt-blocks-post-grid-item {
    max-width: 280px;
}

   
/*fixes issue with image overlay modules*/
   
/* Make the overlay container fill the column width */
.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;                         /* top/right/bottom/left: 0 */
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block;
}


   
.showoverflow {
   overflow: visible;
}
   
/* drawer menu two columns */

.drawer-content .widget_nav_menu {
  /* keep the whole block (heading + list) in the same column */
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 2rem;
}

.wp-block-social-link-anchor a {
  color: white !important;
}
   
   
/* -------------------------------------
   GK Enhanced Video Styling (Simplified Hover)
   ------------------------------------- */
.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 .entry-content-wrap {
  padding-top: 20px;
}
   
.kt-inside-inner-col .wp-block-kadence-advancedbtn.kb-buttons-wrap {
  margin-top: 2em;
}

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

/* STICKY HEADER – NO SHADOW */
.site-header-inner-wrap.kadence-sticky-header.item-is-fixed.item-is-stuck {
  box-shadow: none;
}

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


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

/* MAIN HEADER & STICKY STATE – NO SHADOW */
.item-is-stuck, div#main-header {
  box-shadow: none;
}

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

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

.entry-content-wrap { padding-top: 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; }

/* 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;
}

/* Base: keep strokes hidden until JS measures lengths */
.kb-vector-container svg .st4 {
  /* your stroke styles already exist; we add dash props */
  stroke-dasharray: var(--len, 1);
  stroke-dashoffset: var(--len, 1);
  opacity: 1; /* ensure visible once drawing starts */
}

/* 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)); /* noop—keeps specificity low */
}

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

/* Accessibility: if the user prefers reduced motion, show strokes immediately */
@media (prefers-reduced-motion: reduce) {
  .kb-vector-container svg .st4 {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none !important;
  }
}

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

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

/* Optional: make anything inside (like an iframe or video) fill it */
.video-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Section shell (pre-fold) */
section.section-gk {
  background: var(--surface);
  padding: 3em;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.15);
  margin-bottom: 60px;
  border-bottom: 0px 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 0px rgba(0, 0, 0, 0.15);
  margin-top: 40px;
  margin-bottom: 60px;
  border-bottom: 0px solid var(--brand-accent);
}

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

/* Service pages – round the main content (Section 2) + FAQ section boxes */
body[class*="service"] section.section-gk,
body[class*="service"] section.section-gk-alt {
  border-radius: 0px;
}

.script-accent {
  position: absolute;
  bottom: -0.55em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;

  font-size: 120px;

  /* fade-in setup */
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* when JS is done sizing, this gets added */
.script-accent.script-accent-visible {
  opacity: 1;
}

.service-hero{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}
.service-hero h6.eyebrow{
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: 3px;
  color: #8a8a8a !important;   /* light grey */
  margin-bottom: 0;
}
.service-hero h1{
  font-family: var(--heading-font);
  font-weight: 300;
  font-size: 70px;
  line-height: 1.2em;
  position: relative;
  display: inline-block;
  margin-bottom: 0.25em;
}

/* H2 on service pages */
body[class*="service"] h2{
  font-family: var(--heading-font);
  font-weight: 300;
  font-size: 45px;
  line-height: 1.2;
  margin: 1rem 0 0.7rem;
  letter-spacing: 0;
}


/* H3 on service pages */
body[class*="service"] h3{
  font-family: var(--heading-font);
  font-weight: 300;
  font-size: 35px;        /* ← adjust as needed */
  line-height: 1.1;
  margin: 1rem 0 1rem;
  letter-spacing: 0;
}

.service-hero h4{
  font-size: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 140%;
}

.service-hero h4{
  font-size: 1.7rem;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 140%;
  color: var(--global-palette4);
}

.service-feature-image {
  position: relative;
  isolation: isolate;          /* isolate stacking/animation side effects */
}

/* 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;

  /* Keep visible even if animation is blocked */
  transform: translate3d(0,0,0) scale(1);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;

  /* Unique animation name + delay */
  animation-name: sbZoomUp;        /* avoid colliding with any 'zoomUp' you use elsewhere */
  animation-duration: 800ms;
  animation-timing-function: ease-out;
  animation-delay: 400ms;
  animation-fill-mode: both;
}

.service-feature-image > * {
  position: relative;
  z-index: 1;                  /* keep content above ::after */
}

@keyframes sbZoomUp {
  from { transform: translate3d(0,0,0) scale(0.85); }
  to   { transform: translate3d(0,0,0) scale(1); }
}

.service-hero p{
  font-size: 1rem;
  color: var(--text-body);
  margin-bottom: 1rem;
  line-height: 1.6;
}
/* =====================================
   SERVICE PAGES — DIVIDER OVERRIDE
   ===================================== */

body[class*="service"] hr.section-divider{
  border: 0 !important;
  border-top: 1px solid #F4F3EC !important;
  background: none !important;
  height: 0 !important;
  opacity: 1 !important;
  margin: 30px 0 !important;
}

/* Service list */
ul.service-list{ list-style: none; margin: 0; padding: 0; }
.service-list li{
  position: relative;
  padding-left: 5em;
  margin-bottom: 2rem;
  margin-top: 2rem;
  line-height: 1.4;
}

.service-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  background:
    white
    url("/wp-content/uploads/2025/12/service_icon2.png")
    center / 100% no-repeat;
}
.service-list li > strong{
  display: block;
  font-family: var(--heading-font);
  font-size: 1.2rem;
  font-weight: 400;
  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-palette2);
}
.service-list .meta strong{
  display: inline;
  font-weight: 400;
  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;
  margin-top: 1.25rem;
  line-height: 1.5;
}
.tech-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: -.075em;
  width: 28px;
  height: 28px;
  background:
    #fff
    url("/wp-content/uploads/2025/12/cropped-mint_fav.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: #ffffff;
  color: #000000;
  border: 1px solid #F4F3EC;
  border-radius: 0;
  box-shadow: none;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 26px 24px 26px var(--faq-left-gap);
  line-height: 1.5;
  font-weight: 400;
  font-size: 22px;
  position: relative;
  transition: background-color .25s ease, color .25s ease;
  font-family: var(--global-heading-font-family);
}


.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: 1px solid #333333;   /* charcoal */
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #333333;              /* charcoal plus */
  background: #ffffff;
  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;
}


/* Service pages – round individual FAQ toggles */
body[class*="service"] .gkfaq .gkfaq-toggle {
  border-radius: 0px;
}


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

.two-columns { columns: 2; gap: 1em; }


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

/* 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; }

/* Marble squares (top-left / top-right) */
.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;
}

/* Parent: can be added to any wrapper (e.g. Kadence image block) */
.marble-corner-btmleft,
.marble-corner-btmright,
.marble-corner-topleft,
.marble-corner-topright {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
  z-index: 0;              /* create stacking context so ::after can sit behind */
}

/* Shared marble corner block */
.marble-corner-btmleft::after,
.marble-corner-btmright::after,
.marble-corner-topleft::after,
.marble-corner-topright::after {
  content: "";
  position: absolute;

  /* size as percentage of parent */
  width: 90%;
  height: 90%;
  border-radius: 12px;

  background: url(/wp-content/uploads/2025/12/bg_mint_marbletexture-scaled.webp)
             center / cover no-repeat;

  z-index: -1;             /* behind image/content */

  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%;
}

/* animation */
@keyframes sbZoomUp {
  from { transform: scale(0.85); }
  to   { transform: scale(1); }
}

/* 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;
}

/* 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 (deduped) */
.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;
}

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

/* Vars */
:root{
  --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: .2s;

  --ani-hover-flip-duration: .6s;
  --ani-hover-flip-scale: 0;

  --underline-height: 2px;
  --underline-gap: 0.4em;
}

/* Keyframes */
@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); }
}

/* 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 (<= 768px)
   ========================= */

@media (max-width: 768px){

  .pre-fold-container { display: none; }

  section.section-gk{
    box-shadow: none;
    padding: 1em;
    margin-bottom: 40px;
    border-bottom: none;
  }

  .service-hero h1{ font-size: 40px; } 
  .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 */
  .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;
  }
  
  .two-columns { columns: 1; gap: 1em; }
}


@media (max-width: 768px){

  /* Service page H2s on mobile */
  body[class*="service"] h2 {
    font-size: 28px;      /* tweak this size as you like */
    line-height: 1.3;
    margin: 1rem 0 0.7rem;
  }

}

/* =========================
   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; }
}


/* =========================
   Off Canvas Menu Desktop
   ========================= */

/* Universal target for slide-out menu headings in Kadence Block Header */
.kadence-drawer .widget-area h1,
.kadence-drawer .widget-area h2,
.kadence-drawer .widget-area h3,
.kadence-drawer .widget-area h4,
.kadence-drawer .widget-area .wp-block-heading,
.drawer-inner .widget-area h1,
.drawer-inner .widget-area h2,
.drawer-inner .widget-area h3,
.drawer-inner .widget-area h4,
.drawer-inner .widget-area .wp-block-heading,
.kt-header-widget-area h1,
.kt-header-widget-area h2,
.kt-header-widget-area h3,
.kt-header-widget-area h4,
.kt-header-widget-area .wp-block-heading {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}